ngOptions with dynamic option 인덱스 배열

ngRepeat를 사용하려고합니다. 그 안에, 나는 선택 요소 whos 옵션을 다른 선택에 따라 다릅니다. 현재 ng-options에서 vm.getOperators (filter.keyIndex)를 호출하고 있지만 앵귤러 루프 오류가 발생합니다. ngRepeat 내에서 filterColumn 선택 값에 따라 다음과 같은 "filterOperator"선택 옵션을 어떻게 사용할 수 있습니까?ngOptions with dynamic option 인덱스 배열

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"에서 수행했던 루핑을 구현하고이 "변형 된 데이터"를 클래스 수준 객체에 저장합니다.
"getOperators"나는 단순히 객체 검색을 수행하고 결과를 반환합니다.

출처

2016-09-18 02:51:42 rodney757

ngOptions with dynamic option 인덱스 배열

답변

관련 문제