AngularJS Show/Hide Toggle with NG-Repeat

Question

I have a list of items which on click should open the single item, but currently when trying to open the single item it opens all items and on second click closed all the items - could somebody please advice where I am going wrong with my code below. Thank you.

HTML

<div data-ng-repeat="item in items" layout="column">
  <div layout="row">
    <md-button class="md-primary" ng-click="toggleFilter()">Item {{$index + 1}}</md-button>
  </div>
  <div ng-hide="toggle">
    <!-- Content -->
  </div>
</div>

JS

$scope.toggle = true;
$scope.toggleFilter = function() {
  $scope.toggle = $scope.toggle === false ? true : false;
};

Answer 1

Edit Your code as following:

HTML

<div data-ng-repeat="item in items" layout="column">
  <div layout="row">
    <md-button class="md-primary" ng-click="toggleFilter(item)">Item {{$index + 1}}</md-button>
  </div>
  <div ng-hide="item.toggle">
    <!-- Content -->
  </div>
</div>

JS

$scope.toggleFilter = function(item) {
  item.toggle = !item.toggle;
};

Hope that works :)

Answer 2

ng-repeat creates a new scope for each item. Each new scope will inherit toggleFilter and toggle from its parent. Right now you are switching toggle state for parent scope. Thus all child scopes get the same value. If you want to toggle value on child scope simply use this instead of $scope . Demo

$scope.toggleFilter = function() {
  this.toggle = !this.toggle
}

Answer 3

Add a parametr inside toggleFilter, and make $scope.toggle an array. Like that :

HTML

<div data-ng-repeat="item in items" layout="column">
  <div layout="row">
    <md-button class="md-primary" ng-click="toggleFilter($index)">Item {{$index + 1}}</md-button>
  </div>
  <div ng-hide="toggle[$index]">
    <!-- Content -->
  </div>
</div>

JS

$scope.toggle = [];
$scope.toggleFilter = function(inx) {
  $scope.toggle[inx] = $scope.toggle[inx] === false ? true : false;

};

Answer 4

hi, so i hope i understood it correctly, but below is a sample code based on your question above. Have taken the liberty to go ahead and change your code a bit.

HTML

<div data-ng-repeat="item in items" layout="column">
<div layout="row">
<md-button class="md-primary" ng-click="toggleFilter()">{{buttonText}} </md-button>
</div>
<div ng-show="toggle">
<!-- Content -->
</div>
</div>

Your JS will be as follows

$scope.toggle= false;

$scope.buttonText = "Show";
$scope.toggleFilter = function(){
$scope.toggle = !$scope.toggle;
$scope.buttonText = "Show";
if(toggle===true){
$scope.buttonText = "Hide";
}
};

I hope this helped.

Answer 5

your HTML will be as follows ( only change in HTML is required ).

<div ng-show=showMe>
<!--content goes here -->
<ul>
<li ng-hide = "showMe">item1</li>
<li ng-hide = "showMe">item2</li>
<li ng-hide = "showMe">item3</li>
<li ng-hide = "">item4</li>
</ul>
</div>

I hope your question is answered. If not please leave a comment i will be really happy to help.