0

I'm iterating over elements in a list via an ng-repeat-start(-end). I'm trying to dynamically add a class to the icon based on it type. The problem is that the code within the getClass(...) seems to be getting executed multiple times.

Here's the HTML.

<li style="display:none;" data-ng-repeat-start="entry in entries"></li>
<li>
  <i class="fa" data-ng-class="getIconClass(entry)"></i>
  <span data-ng-bind="entry.name"></span>
</li>
<li style="display:none;" data-ng-repeat-end></li>

Here's the controller function.

$scope.getIconClass = function(entry) {
    console.log('In getIconClass()');
    if(entry.type === 'SYSTEM') {
        return 'fa-laptop';
    } else {
        return 'fa-user';
    }
}

When the loop executes, console.log('In getIconClass()') prints out double for the amount of entries that are in the list (4 times for 2 entries, 8 times for 4 entries, etc).

Any thoughts on why this might be occurring? Does passing the entire entity and poking at properties cause the scope to be reevaluated and thus, the view re-rendered for some reason?

Thanks.

barefootsanders
  • 74
  • 5
  • 4
    I don't believe Angular guarantees the number of times it will evaluate expressions, so functions called should be idempotent. – Alexis King Dec 19 '14 at 17:48
  • Thanks, Alexis. It just seems strange that the number of executions is greater than the length of the list. If you're right, maybe someone could elaborate on why Angular would do this? – barefootsanders Dec 19 '14 at 17:50
  • 1
    That is how angular digest cycle works. Check out the linked answer. Another one http://stackoverflow.com/questions/14987277/function-called-multiple-times-in-angularjs-repeat-section – PSL Dec 19 '14 at 17:53
  • Great. Thanks, PSL! This is exactly what I was looking for but was unable to find. – barefootsanders Dec 19 '14 at 17:55

0 Answers0