Question

我制作了一个过滤器，按类别对问题进行排序。

我试图找出为什么我的Angular过滤器运行的次数比输入值多。

第一期：过滤器在填充问题之前运行：

当存在问题对象时再次运行：

第二期：我的指令的scope.questions数组只包含一个问题对象，但过滤器运行了6次？这是为什么？

指令HTML代码段：

    <div class="category-filter">
        <div ng-repeat="(k, v) in catfilters" class="question">
            <input type="checkbox" ng-init="checked=true" ng-model="catfilters[k]">{{ k }}
        </div>
    </div>

循环：

    <div class="question-category">
        <li ng-repeat="q in questions | bycategory:catfilters" class="question">
            {{q.question.category.category}}
        </li>
    </div>

指令JS：摘录

    scope.questions = args;

    console.log(scope.questions.length); //Length == 1
    /*
        Dynamically add question filters
     */
    scope.questions.forEach(function (k, v) {
        scope.catfilters[k.question.category.category] = true;
    });

过滤器：

    filter('bycategory', function() {
        return function (questions, catfilterObj) {

            console.log('Q', questions); // Called 6 times

            var items = {
                categories: catfilterObj,
                out: []
            };

            angular.forEach(questions, function (value, key) {
                if (this.categories[value.question.cat_id] === true) {
                    this.out.push(value);
                }
            }, items);
            return items.out;
        };
    }

Answer 1

正如@charlietfl指出的那样，你的角度表达式将继续被调用，直到范围稳定为止。

除非您发现它会导致性能问题，否则这不应该是一个问题，但如果您担心，您可能会在您的过滤器中消除一些不必要的操作：

filter('bycategory', function() {
    return function (questions, catfilterObj) {

        console.log('Q', questions); // Called 6 times

        return Array.prototype.filter.call(questions, function (value) {
            return catfilterObj[value.question.cat_id] === true;
        });
    };
})

角度过滤器的运行次数比预期的多

1 个答案: