ngOptions與動態選項數組索引

我想使用ngRepeat。在那裏，我有一個選擇元素whos選項取決於另一個選擇。我目前正在ng選項中調用vm.getOperators（filter.keyIndex），但是我從角度得到了無限循環錯誤。我怎樣才能讓下面的「filterOperator」選擇選項取決於ngRepeat中的filterColumn選擇值？ngOptions與動態選項數組索引

HTML：

<div class="form-group row" ng-repeat="filter in vm.filters"> 
    <div class="col-sm-4"> 
     <select class="form-control" name="filterColumn" ng-model="filter.keyIndex"> 
      <option ng-repeat="key in vm.filterOptions.keys" 
        value="{{ $index }}"> 
       {{ key.column }} 
      </option> 
     </select> 
    </div> 
    <div class="col-sm-2"> 
     <select class="form-control" name="filterOperator" ng-model="filter.operator" ng-options="key as value for (key, value) in vm.getOperators(filter.keyIndex)"></select> 
    </div> 
    <div class="col-sm-4" ng-model="filter.value"> 
     <input type="text" class="form-control"/> 
    </div> 
    <div class="col-sm-1" ng-show="$last" ng-click="removeFilter($index)"> 
     <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button> 
    </div> 
    <div class="col-sm-1" ng-show="vm.filters.length > 1" ng-click="addFilter()"> 
     <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span></button> 
    </div> 
</div>

controller.js：

app.controller('searchCtrl', function() { 
    var defaultFilter = { 
     keyIndex: "0", 
     operator: "", 
     value: "", 
    }; 

    var operatorMap = { 
     "0": "=", 
     "1": "<", 
    }; 

    var vm = this; 
    vm.filterOptions = { 
     "operators": { 
      "type1": ["0", "3"], 
      "type2": ["1", "2", "3"] 
     }, 
     "keys": [ 
      { 
       "datatype": "type1", 
       "name": "a", 
       "column": "col1" 
      }, 
      { 
       "datatype": "type1", 
       "name": "b", 
       "column": "col2" 
      }, 
      { 
       "datatype": "type2", 
       "name": "c", 
       "column": "col3" 
      } 
     ] 
    }; 
    vm.filters = []; 
    //vm.removeFilter = removeFilter; 
    //vm.addFilter = addFilter; 
    vm.getOperators = getOperators; 

    function getOperators(keyIndex) { 
     var operators = []; 
     var dataType = vm.filterOptions.keys[keyIndex].datatype; 

     if (vm.filterOptions.operators[dataType]) { 
      angular.forEach(vm.filterOptions.operators[dataType], function (operator, index) { 
       var obj = {}; 
       obj[dataType] = (operatorMap[operator] ? operatorMap[operator] : operator); 
       operators.push(obj); 
      }); 
     } 
     return operators; 
    } 

    (function init() { 
     // I am actually getting the filterOptions with a REST call, but I've included the data already 
     // The following is done after the successful REST call 
     // add the first filter 
     var filter = defaultFilter; 
     filter.operator = Object.keys(getOperators(filter.keyIndex))[0]; 
     vm.filters.push(filter); 
    }).call(); 
});

這裏有一個plunker：https://plnkr.co/edit/yGyvwThuWWnNph72OAT0

來源

2016-09-17 rodney757

您能否爲我們提供一個帶有REST服務數據的重要服務器？ –

我已經添加了一個運動員。我也刪除了REST調用，因爲我已經添加了數據對象。在我的應用程序中，我將通過REST獲取對象，但是 – rodney757

該錯誤是由於調用getOperators（）函數導致的摘要循環問題。但嚴重的是，您在調用函數中使用了一些沉重的循環。無法理解你試圖在顯示 –

好了，所以我想通了這一點。首先，不要在getOperators方法中生成數組。你可以返回和已經定義的數組，但是你不能在這裏生成一個新的數組。這導致無限循環，因爲角度檢測到更改並再次調用getOperators方法。

所以我所做的就是...

將數據從REST服務是獲取後，我調用一個函數「transformOperators」。這實現了我在「getOperators」中做的循環，並將這個「變換後的數據」存儲在一個類級別的對象中。
in「getOperators」我只是做一個對象查找並返回結果。

來源

2016-09-18 02:51:42 rodney757

ngOptions與動態選項數組索引

回答

相關問題