Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<div ng-controller="MyCtrl as ctrl">
<p>Watch your console, then click on a letter. Why "myterious" function is launched so many time ???</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="item.mysterious">This should only be display under {{item.name}}</div>
<div ng-show="ctrl.display[$index]">...</div>
<br>
</div>
</div>
JavaScript
var app = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
app.controller('MyCtrl', [function() {
var self = this;
self.isMystery = false;
self.vitals = [
{name:'A', mysterious: false},
{name:'B', mysterious: true},
{name:'C', mysterious: false},
{name:'D', mysterious: false},
{name:'E', mysterious: false},
{name:'F', mysterious: false},
{name:'G', mysterious: false},
{name:'H', mysterious: false},
{name:'I', mysterious: false},
{name:'J', mysterious: false},
{name:'K', mysterious: false}
];
self.display = [];
self.toggleDetail = function(id) {
console.log("Toggle launched");
self.display[id] = !self.display[id];
};
self.value = 'B';
self.setValue = function (val) {
self.vitals.forEach(function(obj) {
if (obj.name != val)
obj.mysterious = false;
else
obj.mysterious = true;
})
self.value = val;
}
self.myterious = function (a, b) {
console.log(a + ' ' + new Date().getTime());
if (a === b) {
return true;
} else {
return false;
}
}
}]);