Question

我正在尝试使用ngRepeat。在其中，我有一个选择元素，其中选项根据另一个选择而变化。我目前在ng-options中调用vm.getOperators（filter.keyIndex），但是我从angular获得了无限循环错误。我怎样才能拥有以下＆＃34; filterOperator＆＃34; select选项取决于ngRepeat中的filterColumn选择值？

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

这里是一名掠夺者：https://plnkr.co/edit/yGyvwThuWWnNph72OAT0

Answer 1

好的，所以我想出来了。

首先，不要在getOperators方法中生成数组。您可以返回已定义的数组，但不能在此处生成新数组。当角度检测到变化并再次调用getOperators方法时，这会导致无限循环。

所以我做的是......

从REST服务获取数据后，我调用了一个函数＆＃34; transformOperators＆＃34;。这实现了我在＆＃34; getOperators＆＃34;中所做的循环。并存储这个转换后的数据＆＃34;在班级对象中。
＆＃34; getOperators＆＃34;我只是做一个对象查找并返回结果。

来自索引的动态选项数组的ngOptions

1 个答案: