使用AngularJS ng-repeat维护显示结果数的计数

时间:2014-11-19 20:58:33

标签: javascript html5 angularjs

我做了一个Plunker来演示我的问题: http://plnkr.co/edit/sT9cFUFPhR2Z45SiRW7V?p=preview

如果搜索是新搜索,它似乎会更新计数但是一旦所有内容都被缓存,它就会停止更新计数。似乎没有办法清除ng-repeat的缓存(我知道)并且我不确定我是否真的想要这样做,因为它会损害性能。

有没有办法保持一个或多个ng-repeats中显示的总行数的最新数量?

HTML:                                                   

  <body ng-app="app">
    <div ng-controller="ctrl as c">
      <h1>{{'Count: ' + (c.count + c.count2)}}</h1>

      Search by name: <input type="text" ng-model="name">

      <div ng-repeat="name in c.names | filter:name" ng-init="c.count = $index + 1;">
          {{name}}
      </div>
      <div ng-repeat="name in c.names2 | filter:name"  ng-init="c.count2 = $index + 1;">
          {{name}}
      </div>
    </div>
  </body>
</html>

Javascript:

var app = angular.module('app', []);
app.controller('ctrl', function(){
  var c = this;
  c.count = 0;
  c.names = ['jim', 'james', 'fred', 'lue'];
  c.names2 = ['jim2', 'james2', 'fred2', 'lue2'];
});

1 个答案:

答案 0 :(得分:1)

将过滤后的数组设置为临时变量并对其进行计数。

Plunker

<div ng-controller="ctrl as c">

<h1>Count: {{c.filtered1.length + c.filtered2.length}}</h1>
Search by name:
<input type="text" ng-model="name">

<div ng-repeat="name in c.filtered1 = (c.names | filter:name)">
  {{name}}
</div>

<div ng-repeat="name in c.filtered2 = (c.names | filter:name)">
  {{name}}
</div>

</div>