Question

关于如何正确计算视图中重复记录的快速问题？

以下是观点：

<h4> Drafts </h4>
<ul class="nav nav-pills scrollable-nav">
  <li ng-repeat="solution in solutions | filter: {'username': username}: true | filter: {visible: false} "> 

    <a href="#" onclick="return false;">
      <h5 ng-click="editSolution(solution.$id)">{{solution.name}}</h5>
    </a>

  </li>                            
</ul>

我想知道解决方案重复多少次？用户可以随时将solution.visible值更改为true，因此我需要动态显示该数字。

我可以使用范围中的变量来跟踪该数字，但我想知道是否还有其他更好的方法可以做到这一点？

Answer 1

您可以创建一个临时变量，其中包含过滤结果的值

<li ng-repeat="solution in filteredSolutions = (solutions | filter: {'username': username, visible: false}: true)">

然后执行{{filteredSolutions.length}}获取计数

您还可以使用替代方法，将过滤后的结果别名为@Claies建议，在Angular 1.3+中支持

<li ng-repeat="solution in solutions | filter: {'username': username, visible: false}: true as filteredSolutions">

Answer 2

有时在控制器中过滤数据会更方便。你可以这样做：

<div ng-controller="ListCtrl as ctrl">
      <ul>
          <li ng-repeat="person in ctrl.people" ng-click="ctrl.hide(person)">
            {{person.name}}: {{person.phone}}
          </li>
      </ul>
      <div>
          Records count: {{ctrl.people.length}}
      </div>
</div>

和控制器：

app.controller('ListCtrl', ['$scope', '$filter', function ($scope, $filter) {
    var self = this;    
    this.hide = function(item) {
       item.visible = false;
       self.refresh();
    };    
    this.refresh = function() {
        self.people = $filter('filter')(people, {visible: true});
    };   
    this.refresh();
}]);

这样，您只需在控制器变量中包含已过滤的数据，并可以使用它来显示记录数。

这是jsfiddle with demo。

如何动态计算ng-repeat重复的次数？

2 个答案: