问题
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