In the code snippet below, a ul is populated with 21 phones using HTML:
<li ng-repeat="phone in phones" ng-class="{'digestTest': countDigestOccurences(phone) }">
<p>{{phone.snippet}}</p>
</li>
The JavaScript method countDigestOccurences utilizes a dictionary to track the number of times it is called for each phone:
$scope.countDigestOccurences = function(phone){
var phoneFound = false;
$.each($scope.digestOccurencesPerPhone, function(){
if(this.phone.id == phone.id){
phoneFound = true;
this.occurences++;
}
});
if(!phoneFound)
{
$scope.digestOccurencesPerPhone.push({
phone: phone,
occurences: 1
});
}
}
Upon analyzing, it is noted that countDigestOccurences is called 4 times for each phone. Curiously, the reason behind this frequent calling remains a mystery.
https://i.sstatic.net/4FL4F.png
Update:
Interestingly, the cycle repeats 4 times even when the Phone item's HTML is modified as shown below:
<li ng-repeat="phone in phones "
class="thumbnail phone-listing" ng-class="{ 'digestTest': countDigestOccurences(phone), 'digestTestAgain': randomMethodDoesNothing() }">
<p>{{phone.snippet}}</p>
</li>