I'm facing a major performance issue.
I need to display details in a list, but the function is being called excessively.
Feel free to check out the demo here
Here's the HTML code snippet :
<div ng-controller="MyCtrl as ctrl">
<p>Keep an eye on your console, then click on a letter. Why does the "mysterious" function run so many times?</p>
<button ng-click="ctrl.setValue('B')">Display B</button>
<button ng-click="ctrl.setValue('C')">Display C</button>
<button ng-click="ctrl.setValue('D')">Display D</button>
<div ng-repeat="item in ctrl.vitals track by $index">
<p ng-click="ctrl.toggleDetail($index)" ng-bind="item.name"></p>
<div ng-show="ctrl.myterious(item.name, ctrl.value)">This should only be displayed under {{item.name}}</div>
<div ng-show="ctrl.display[$index]">...</div>
<br>
</div>
</div>
Here's the JavaScript code I've got :
var app = angular.module('myApp',[]);
app.controller('MyCtrl', [function() {
var self = this;
self.vitals = [
{name:'A'},
{name:'B'},
{name:'C'},
{name:'D'},
{name:'E'},
{name:'F'},
{name:'G'},
{name:'H'},
{name:'I'},
{name:'J'},
{name:'K'}
];
self.display = [];
self.toggleDetail = function(id) {
console.log("Toggle triggered");
self.display[id] = !self.display[id];
};
self.value = 'B';
self.setValue = function (val) {
self.value = val;
}
self.myterious = function (a, b) {
console.log(a + ' ' + new Date().getTime());
if (a === b) {
return true;
} else {
return false;
}
}
}]);
I'm looking for insights on identifying and resolving this problem, as this example is a simplified version of my actual code.