In the HTML code below, there is an ng-repeat that creates checkboxes:
<span ng-repeat="name in $ctrl.widgetSelectorNames" class="widget-selectors">
<label class="checkbox" for="{{name}}">
<input type="checkbox" value="{{name}}" ng-model="name" ng-change="$ctrl.toggleVisibility(name)" ng-checked="$ctrl.checkIfHidden(name)"/>
{{name}}
</label>
</span>
The goal is to set ng-checked=true if the corresponding item has a 'hidden' property set to true. While the logic seems correct, the ng-checked function is being called excessively:
let numTimesCalled = 0;
$ctrl.checkIfHidden = function (name){
numTimesCalled++;
console.log(numTimesCalled);
$ctrl.widgets.forEach(widget => {
if (name == widget.name && widget.hidden) {
return true;
}
})
return false;
}
Even though there are only six items in $ctrl.widgetSelectorNames, the function is triggered 48 times according to the numTimesCalled counter! Why is this happening? Is there a better approach to achieve this?