Changing value of a boolean using ng-click used inside a ng-repeat
I am displaying some data on my html page inside a div using ng-repeat. Inside the div I have a button in order to hide the content of each div seperately.Here is a simplified version of my html file.
<body ng-app="task" ng-controller="repeat">
<div ng-repeat='x in array' ng-show="{{ x.show }}">
<p>{{ x.text }}
</p>
<button ng-click="toggle()">Hide</button>
</div>
</body>
the code in my .js file is as follows
var app = angular.module('task');
app.controller('repeat',function($scope){
$scope.array = [{
show: true,
text:'Sample Text 1'},
{
show: true,
text:'Sample Text 2'},
{
show: true,
text:'Sample Text 3'}];
$scope.toggle = function(){
$scope.array.show = false ;
};
})
Can anyone suggest me the required changes so that on clicking the button inside my div , that particular div gets hidden.
I think I am committing a mistake in referencing the particular element of the array while calling the function toggle() through ng-click
Answer
Put your element as an argument in toggle function.
<button ng-click="toggle(x)">Hide</button>
and change it in controller like this:
$scope.toggle = function(x){
x.show = !x.show;
};