hide fields from selected elements

reveal/hide an input field based upon selected value

by Randy Crews

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<input type="button" value="Add Filter" title="Add Group" data-bind="click: $root.addFilter" />
<table>
    <tbody data-bind="foreach: myfilters">
        <tr>
            <td>
                <select data-bind="options: $root.filterOperators, value:operator, optionsText:'operatorName'"></select>
            </td>
            <td>
                <input data-bind="value: criteria1" />
            </td>
            <td>
                <input data-bind="value: criteria2, visible: inputVisible() === 'BETWEEN'" />
            </td>
        </tr>
    </tbody>
</table>

JavaScript

function FilterList(JoiningOperator, AttributeHierarchy, AttributeIDHierarchy, Operator, FilterCriteria, FilterCriteriaRange) {
    var self = this;
    self.operator = ko.observable(Operator);
    self.criteria1 = ko.observable(FilterCriteria);
    self.criteria2 = ko.observable(FilterCriteriaRange);
}

function AppViewModel() {
    var self = this;

    self.filterOperators = ko.observableArray([{
        operatorName: "EQUALS",
        operatorValue: "="
    }, {
        operatorName: "GREATER THAN",
        operatorValue: ">"
    }, {
        operatorName: "GREATER THAN OR EQUAL TO",
        operatorValue: ">="
    }, {
        operatorName: "LESS THAN",
        operatorValue: "<"
    }, {
        operatorName: "LESS THAN OR EQUAL TO",
        operatorValue: "<="
    }, {
        operatorName: "NOT EQUAL TO",
        operatorValue: "<>"
    }, {
        operatorName: "NOT LESS THAN",
        operatorValue: "!>"
    }, {
        operatorName: "NOT GREATER THAN",
        operatorValue: "!<"
    }, {
        operatorName: "BETWEEN",
        operatorValue: "BETWEEN"
    }, {
        operatorName: "LIKE",
        operatorValue: "LIKE"
    }]);
    //define filter collection
    self.myfilters = ko.observableArray([]);
    self.addFilter = function () {
        self.myfilters.push(new FilterList(self.filterOperators[0]));
    };
    
    self.inputVisible = ko.computed(function(){
        //retreive the selected value of the current row and display the second criteria field if the selected value is BETWEEN
        //return self.operator();
    });
}
ko.applyBindings(new AppViewModel());