javascript - AngularJS ShowHide Toggle with NG-Repeat - Stack Overflow

admin管理员组

文章数量:1208155

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;
};

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;
};

• javascript
• jquery
• angularjs

Share Improve this question Follow asked Jul 25, 2016 at 9:33 user6229034user6229034

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 14

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 :)

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
}

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;

};

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.

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.

本文标签： javascriptAngularJS ShowHide Toggle with NGRepeatStack Overflow