Clever Geek Handbook

Changing boolean value with ng-click used inside ng-repeat

I am displaying some data in my html page inside a div using ng-repeat. Inside div

I have a button to hide the content of each div

separately. 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 looks like this

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 please suggest me the necessary changes so that when a button is clicked inside mine, div

this particular div is hidden.

I think I am making a mistake when referencing a specific element of the array by calling function toggle()

via ng-click

+3


source to share


4 answers


Well, I found a way to satisfy my needs, thanks everyone for your suggestions. Here is the code I used:

<body ng-app="task" ng-controller="repeat">
 <div ng-repeat='x in array' ng-hide="x.show">
  <p>{{ x.text }}
  </p>
  <button ng-click="toggle($index)">Hide</button>
 </div>
</body>


and in my js file i used it like this:

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[index].show = false ;
  };
})
+2


source


Put your element as an argument in the toggle function.

<button ng-click="toggle(x)">Hide</button>


and change it in your controller like this:

$scope.toggle = function(x){
    x.show = !x.show;
};
+3


source


And it's easy to achieve this without calling the function in the controller:

<body ng-app="task" ng-controller="repeat">
  <div ng-repeat='x in array' ng-show="showDetail">
    <p>{{ x.text }}</p>
      <button ng-click="showDetail != showDetail">Hide</button>
  </div>
</body>

The above method will also hide the button if you click hide. If you want to hide your content and show it again, the following code can achieve this:

<body ng-app="task" ng-controller="repeat>
  <div ng-repeat='x in array'>
    <div class="content" ng-show="showContent">
      <p>{{ x.text }}</p>
    </div>
    <div class='btn btn-control'>
      <button ng-click="showContent != showContent"> Hide </button>
    </div>
  </div>
</body>
+3


source


In your html pass

   <button ng-click="toggle(x.$index)">Hide</button>

While in js

  $scope.toggle = function(index){
  $scope.array[index].show = !$scope.array[index].show;
  };
+1


source






More articles:


All Articles