ngOptions mit dynamischen Option Array von Index

Question

Ich versuche, ngRepeat zu verwenden. Innerhalb dessen habe ich ein Auswahlelement, dessen Optionen abhängig von einer anderen Auswahl variieren. Ich rufe derzeit vm.getOperators (filter.keyIndex) in den ng-Optionen auf, bekomme aber einen unbestimmten Schleifenfehler von angular. Wie kann ich die folgenden "FilterOperator" Auswahloptionen abhängig von FilterColumn Auswahlwert innerhalb eines ngRepeat?

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(); 
}); 

Hier ist ein Plunker: https://plnkr.co/edit/yGyvwThuWWnNph72OAT0

Answer 1

Okay, so dass ich dachte dies.

Zuerst generieren Sie kein Array in der Methode getOperators. Sie können ein Array zurückgeben, das bereits definiert ist, aber Sie können hier kein neues Array generieren. Dies führt zu einer unbestimmten Schleife, wenn der Winkel eine Änderung feststellt und die Methode getOperators erneut aufruft.

Also, was ich tat, war ...

1. , nachdem die Daten aus dem REST-Dienst geholt wurde, habe ich eine Funktion "transformOperators" nennen. Dies implementiert die Schleife, die ich in "getOperators" ausgeführt habe, und speichert diese "transformierten Daten" in einem Objekt auf Klassenebene.

2. in "getOperators" Ich mache einfach eine Objektsuche und die Ergebnisse zurück.