Question

假设一个这样的列表：

var list = [
    { status: true, name: 'Bar' },
    { status: true, name: 'Foo' },
    { status: false, name: 'John' }
];

现在我只想列出status === true

的名称

所以我构建了以下HTML：

<ul>
    <li ng-repeat="item in list | completed">
        {{item.name}}
    </li>
</ul>

过滤代码：

angular.module('MyApp')
    .filter('completed',
    function () {
        var filtered = [];
        return function (items) {
            anuglar.forEach(items, function(item) {
                if ( item.status === true ) {
                    filtered.push(item);
                }
            }
            return filtered;
        }
    });

我注意到过滤器函数被调用了3次（恰好是列表数组的长度）。但为什么，这不应该只是一次？我的代码中有什么问题，因为它看起来不是很优化吗？！

Answer 1

过滤函数每个摘要运行一次（每个摘要周期可能有多个摘要）。

这是一个演示插件：http://plnkr.co/edit/Gmg0m5XG0KVGJXIWcX1Q?p=preview

您可以编写一个这样的简单过滤器：

app.filter('completed', function() {
  return function(items) {
    return items.filter(function(item) {
      return item.status === true;
    });
  };
});

如果您关心性能，可以在控制器内进行预滤波：

$scope.filteredList = $scope.list.filter(function(item){ 
  return item.status === true; 
});

然后只需迭代过滤后的列表：

<li ng-repeat="item in filteredList track by item.name">

Answer 2

您不需要为此设置自定义过滤器，您可以这样做：

<li ng-repeat="item in list | filter:{status:true}">

或者如果在此控制器中使用了此过滤器，则可以执行快速操作：

$scope.completed = function(item) {
  return item.status === true;
});

使用如下：

<li ng-repeat="item in list | filter:completed">

angularjs：ng-repeat中的自定义过滤器

2 个答案:

这是一个演示插件：http://plnkr.co/edit/Gmg0m5XG0KVGJXIWcX1Q?p=preview