In my angular application, I have defined a module called 'ngStyleApp' with a controller named 'testCtrl' that contains a list of numbers and a function to return styles based on the index.
angular.module('ngStyleApp', [])
.controller('testCtrl', function($scope) {
$scope.list = [1,2,3];
$scope.getStyles = function(index) {
console.log('getting styles for index ' + index);
return {
color: 'red'
};
};
});
The corresponding HTML markup displays a list using ng-repeat and applies styles using ng-style:
<div ng-app="ngStyleApp">
<ul ng-controller="testCtrl">
<li ng-repeat="value in list" ng-style="getStyles($index)">
{{value}}
</li>
</ul>
</div>
Even though the expected output is three red list items, the console logs show that the styles function is being called multiple times:
getting styles for index 0
getting styles for index 1
getting styles for index 2
getting styles for index 0
getting styles for index 1
getting styles for index 2
What could be causing this duplication?