CODEWITHSUNDEEP
angularjs
tzimme
tzimme

Reputation: 45

AngulaJS Hide/Show tablerows depending on several conditions/hide all

I have a table, in which i would like to only show rows that match some variables, as well as hide/show all rows.

So, with additional variables to add later, how would i implement a hide/show all functionallity preferably with keeping the <"a> tags

<a href="" class="collapsectl" id="collapse-expand"><span class="glyphicon glyphicon-triangle-bottom"></span> Expand all</a>
<a href="" class="collapsectl" id="collapse-hide"><span class="glyphicon glyphicon-triangle-right"></span> Hide all</a>

<table style="width: 50%" class="table table-striped table-bordered table-hover">
    <colgroup>
        <col class="col-xs-1">
        <col class="col-xs-3">
        <col class="col-xs-3">
        <col class="col-xs-1">
    </colgroup>
 <thead>
  <th>ID</th>
  <th> name</th>
  <th> name</th>
  <th>Action</th>
 </thead>
 <tbody>
  <tr class="{{ a.b ? 'danger' : 'success' }}" ng:repeat:start="entity in entities">
   <td>{{a.id}}</td>
   <td>{{a.name}}</td>
   <td>{{a.asd.name}}</td>
   <td>
    <a class="glyphicon glyphicon-pencil" href="#project/{{project.id}}"></a>
    <a class="glyphicon glyphicon-triangle-bottom" href="" class="rowtrigger" data-toggle="collapse" data-target="#detail_{{project.id}}"></div>
   </td>
  </tr>
  <tr ng:repeat:end>
   <td colspan="4" class="collapse-row">
    <div id="detail_{{a.id}}" class="collapse statuslabel">
     <span ng:repeat="version in a.versions" class="label label-{{ version.b ? 'danger' : 'success' }}">
      {{version.version}}
     </span>
    </div>
   </td>
  </tr>
 </tbody>
</table>

Upvotes: 2

Views: 39

Answers (1)

Dave V
Dave V

Reputation: 1976

You could put a click event on the Hide/Show all and have that set a boolean property in the controller. Then bind that boolean property to the ngHide attribute on the rows. You could do something like ng-hide="hideAll || <whatever other conditions you want>"

Upvotes: 1

Related Questions