angularjs - How to expand/collapse all rows in Angular -

i have created function toggle individual rows of ng-table open , 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 plunkr more code, note expand/collapse buttons in "menu".

however, can't figure out way toggle of rows on , off. want able somehow run loop on rows , call toggle if needed, attempts @ doing have failed. see them below:

testcase.prototype.expandallattemptone = function() {    (var row in this) {      if (!row.showme)      row.showme = !row.showme;    } }  function expandallattemptonetwo(data) {    (var in data) {      if (!data[i].showme)       data[i].showme = !data[i].showme;    }  } 

any ideas on how toggle rows on/off?

using ng-show directive in combination ng-click , ng-init directives, can 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 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 doing couple things here. first, our controller contains array of person objects. each 1 of these objects has property named visible. we'll use toggle items on , off. second, define function in our controller named setvisible. takes boolean value argument, , iterate on entire persons array , set each person object's visible property value.

now, in our html, using 3 angular directives; ng-click, ng-repeat, , ng-show. seems kinda know how these work, i'll explain i'm doing them instead. in our html use ng-click set our click event handler our "show all" , "hide all" buttons. clicking either of these cause setvisible called value of either true or false. take care of toggling of our list items either on, or off.

next, in our ng-repeat directive, provide expression angular evaluate when list item clicked. in case, tell angular toggle person.visible opposite value currently. hide list item. , finally, have our ng-show directive, used in conjunction our visible property determine whether or not render particular list item.

here plnkr working example: http://plnkr.co/edit/mlxyvfdo0jzvtkk0gman?p=preview

this code general example of might do, should able expand upon fit particular need. hope help!