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与动态选项数组索引

回答

相关问题