Maintaining a count of the number of results being displayed with AngularJS ng-repeat

Question

I made a Plunker to demo my question: http://plnkr.co/edit/sT9cFUFPhR2Z45SiRW7V?p=preview

It seems like it updates the count if the search is a new search but once everything has been cached it stops updating the count. There doesn't seem to be a way to clear the cache of ng-repeat (that I know of) and I am not sure if I really want to do that anyway since it would hurt performance.

Is there a way to keep an up to date count of the total rows being displayed in one or more 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'];
});

Dylan · Accepted Answer · 2014-11-19 21:16:40Z

1

Set a filtered array as a temp variable and count it.

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>

answered Nov 19, 2014 at 21:16

Dylan

4,7831 gold badge22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Maintaining a count of the number of results being displayed with AngularJS ng-repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related