1

ユーザーが複数の条件を追加できる動的フィルター リストを作成しています。このリストは、select 要素と 2 つの入力フィールドで構成されています。最初は 1 つのフィールドのみが表示されます。2 番目のフィールドは、値 BETWEEN が選択されている場合にのみ表示されます。on select 要素を使用して要素の可視性を設定する例を見てきました。これが私がこれまでに持っているものです：

js

function FilterList(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(){
        //retrieve 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());

html

<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>

私が立ち往生しているのは、私が対話している現在の行の正しい値を取得することです。このリンクhttp://jsfiddle.net/rlcrews/R6Kcu/は、生成されている行を示す実用的なフィドルを提供します。

4

1 に答える 1

1

これはあなたが探しているものですか？ http://jsfiddle.net/pyvJW/1/。

myfilters をループしているので、演算子フィールドにアクセスできます。operator は監視可能であるため、operatorName にアクセスするにはかっこが必要でした。

<input data-bind="value: criteria2, visible: operator().operatorName === 'BETWEEN'" />

于 2013-05-31T20:19:09.757 に答える