I am bulding a list using ng-repeat from array of objects. One of the property in array is a boolean that will go in ng-show of each element I am building using this array. Array itself is a scope variable too.
Now I want to update display property only. Is it possible?
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.displayThird = false;
$scope.list = [
{
text: "One",
display: true
},
{
text: "Two",
display: true
},
{
text: "Three",
display: $scope.displayThird
},
{
text: "Four",
display: true
}
];
/* I want this function to update my display property */
$scope.display = function() {
$scope.displayThird = true;
}
});
1 Answer 1
This is a common misconception: When you assign an expression to a variable in Javascript, only the value of the expression gets assigned. No binding gets created. On the contrary, expressions in Angular templates do create bindings.
Therefore in your case the $scope.list[2].display gets assigned the value false and knows nothing how this value was created.
The correct way to do this in Angular is with a watch:
$scope.$watch("displayThird", function(newval) {
$scope.list[2].display = newval;
});
This is what Angular does under the hoods with its templates, only you have to do it manually in Javascript.
var idx= $scope.list.indexOf(item)