view raw
user2968538 user2968538 - 8 months ago 52
AngularJS Question

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">
<col class="col-xs-1">
<col class="col-xs-3">
<col class="col-xs-3">
<col class="col-xs-1">
<th> name</th>
<th> name</th>
<tr class="{{ a.b ? 'danger' : 'success' }}" ng:repeat:start="entity in entities">
<a class="glyphicon glyphicon-pencil" href="#project/{{}}"></a>
<a class="glyphicon glyphicon-triangle-bottom" href="" class="rowtrigger" data-toggle="collapse" data-target="#detail_{{}}"></div>
<tr ng:repeat:end>
<td colspan="4" class="collapse-row">
<div id="detail_{{}}" class="collapse statuslabel">
<span ng:repeat="version in a.versions" class="label label-{{ version.b ? 'danger' : 'success' }}">


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>"