How to expand/collapse all rows in Angular

问题

I have successfully created a function to toggle the individual rows of my ng-table to open and close using:

TestCase.prototype.toggle = function() {
  this.showMe = !this.showMe;
}

and

<tr ng-repeat="row in $data">

  <td align="left">
    <p ng-click="row.toggle();">{{row.description}}</p>

    <div ng-show="row.showMe">

See the plunkr for more code, note the expand/collapse buttons are in the "menu".

However, I can't figure out a way to now toggle ALL of the rows on and off. I want to be able to somehow run a for loop over the rows and then call toggle if needed, however my attempts at doing so have failed. See them below:

TestCase.prototype.expandAllAttemptOne = function() {
   for (var row in this) {
     if (!row.showMe)
     row.showMe = !row.showMe;
   }
}

function expandAllAttemptOneTwo(data) {
   for (var i in data) {
     if (!data[i].showMe) 
     data[i].showMe = !data[i].showMe;
   }
 }

Any ideas on how to properly toggle all rows on/off?

回答1:

Using the ng-show directive in combination with the ng-click and ng-init directives, we can do something like this:

<div ng-controller="TableController">
  <button ng-click="setVisible(true)">Show All</button>
  <button ng-click="setVisible(false)">Hide All</button>
  <ul>
    <li ng-repeat="person in persons" 
        ng-click="person.visible = !person.visible" 
        ng-show="person.visible">
    {{person.name}} 
    </li>
  </ul>
</div>

Our controller might then look like this:

myApp.controller('TableController', function ($scope) {

  $scope.persons = [
    { name: "John", visible : true}, 
    { name: "Jill", visible : true}, 
    { name: "Sue", visible : true}, 
    { name: "Jackson", visible : true}
    ];

  $scope.setVisible = function (visible) {
    angular.forEach($scope.persons, function (person) {
      person.visible = visible;
    });
  }
});

We are doing a couple things here. First, our controller contains an array of person objects. Each one of these objects has a property named visible. We'll use this to toggle items on and off. Second, we define a function in our controller named setVisible. This takes a boolean value as an argument, and will iterate over the entire persons array and set each person object's visible property to that value.

Now, in our html, we are using three angular directives; ng-click, ng-repeat, and ng-show. It seems like you already kinda know how these work, so I'll just explain what I'm doing with them instead. In our html we use ng-click to set up our click event handler for our "Show All" and "Hide All" buttons. Clicking either of these will cause setVisible to be called with a value of either true or false. This will take care of toggling all of our list items either all on, or all off.

Next, in our ng-repeat directive, we provide an expression for angular to evaluate when a list item is clicked. In this case, we tell angular to toggle person.visible to the opposite value that it is currently. This effectively will hide a list item. And finally, we have our ng-show directive, which is simply used in conjunction with our visible property to determine whether or not to render a particular list item.

Here is a plnkr with a working example: http://plnkr.co/edit/MlxyvfDo0jZVTkK0gman?p=preview

This code is a general example of something you might do, you should be able to expand upon it to fit your particular need. Hope this help!

来源：https://stackoverflow.com/questions/24442663/how-to-expand-collapse-all-rows-in-angular