Question

使用AngularJS ng-repeat，我正在过滤人员列表。结果人员列表将传递给变量filtered。我想显示filtered.length。

过滤器工作正常并在我调整过滤器时显示正确的人，但有时会有多少人（即filtered.length）的数量不会更新。

看起来很奇怪：

    <br><br>
    People Selected: {{filtered.length}}<br><br>
    Cost: {{filtered.length*0.01 | currency}}
</div>
<div class="span10">
    <br><br>
    <table class="people">
        <tr ng-repeat="person in (filtered = (data.people | filter:okay))">
            <td>{{person.age}} - {{person.gender}} - {{person.tags}}</td>
        </tr>
    </table>
</div>

但是，如果我在页面底部显示filtered.length似乎在ng-repeat之后，它就会起作用。如果我把它放在顶部，它只能在80％的时间内工作。

Answer 1

可以将过滤器方法移动到控制器，以便您可以更新长度变量：

app.controller('MainCtrl', function($scope) {

  var items=[
    {name:'Jim', ok: true},
    {name:'Sue', ok: true},
    {name:'Bob', ok: false},

    ];

    $scope.$watch('filter.value',function(){     
      $scope.items=items.filter(function(item){
         return item[$scope.filter.property]==$scope.filter.value
      })
      $scope.num_items=$scope.items.length;

    });
    $scope.filter={value:true, property: 'ok'}
});

Plunker demo

Answer 2

我找到了一个解决方案，遗憾的是需要多次运行过滤器：

    People Selected: {{(data.people | filter:okay).length}}<br><br>
    Cost: {{(data.people | filter:okay).length*0.02|currency}}

我的小数据集可以，但如果你能看到原始问题中的错误，请告诉我。

当ng-repeat更新过滤器时，AngularJS过滤结果不会更新

2 个答案: