AngularJS : Binding a variable in template to increase performances

Question

Here is a code sample I use:

<div ng-class="{alert: ((elements|filter:{hasAlert: true}).length / elements.length) > maxPercentAlerts}">

{{(elements|filter:{hasAlert: true}).length}}

({{Math.floor((elements|filter:{hasAlert: true}).length * 100 / elements.length)}} %)

</div>

As you see, I need to filter my 'elements' array 3 times. I would like to use this kind of following code to increase perfs: (this is just an example of what I need, not real code)

<div some-ng-prop="alertCount=(elements|filter:{hasAlert: true}).length"
    <div ng-class="{alert: (alertCount / elements.length) > maxPercentAlerts}">

    {{alertCount}}

    ({{Math.floor(alertCount * 100 / elements.length)}} %)

</div>

I've tried to handle it with the 'ng-init' attribute: it worked great... But when my model changes, the values are not updated.

Is there a way to do that ?

I've tried to be clear, but please ask for details if you don't understand what I mean.

possible duplicate of [Angular.js. How to count ng-repeat iterations which satisfy the custom filter](http://stackoverflow.com/questions/19664691/angular-js-how-to-count-ng-repeat-iterations-which-satisfy-the-custom-filter) — Stewie, Jan 28 '14 at 14:50
I updated my plunker with buttons to change the collection and to see the filter counts. — Ilan Frumer, Jan 28 '14 at 15:30

Ilan Frumer · Accepted Answer · 2014-01-28T15:33:44.527

Here is a plunker: http://plnkr.co/edit/bNjSnee5UwVjp6wHE6RK

I created a directive:

I use $parse rather than $eval for optimizations.
You provide a collection to watch and an expression to run on each change.
It works like ngInit only it updates when the collection is dirty.
I chose general names for attributes, you can change it to what you like.

directive:

app.directive('watchCollection', function($parse){
  return {
    compile: function(tElm,tAttrs){

      if(! tAttrs.assign) return;

      var assignFn = $parse(tAttrs.assign)

      return function(scope,elm,attrs){      
        scope.$watchCollection(tAttrs.watchCollection , function(val){
          assignFn(scope);
        })
      }
    }
  }
})

html:

<div watch-collection="elements" 
     assign="alertCount=(elements|filter:{hasAlert: true}).length">

score 0 · Answer 2 · answered Jan 28 '14 at 15:04

0

Stewie suggested it was a duplicate, I think it's not but it made me try the following code which works great :

<div ng-class="{alert: (alertCount / elements.length) > maxPercentAlerts}">

{{alertCount = (elements|filter:{hasAlert: true}).length}}

({{Math.floor(alertCount * 100 / elements.length)}} %)

</div>

answered Jan 28 '14 at 15:04

Nicolas

1,812
3
19
43

That's even worse for performance as it would run on each $digest. There could be many $digests with each digest cycle – Ilan Frumer Jan 28 '14 at 15:18
1

Now I realize that it would always run, even if the collection hasn't changed. – Ilan Frumer Jan 28 '14 at 15:24

AngularJS : Binding a variable in template to increase performances

2 Answers2

I created a directive:

Linked