Show/hide table rows based on dynamic content in AngularJS?

Question

I have an HTML table as follows:

<table>
  <tr ng-show="showCats"><td>Cat</td><td>1</td></tr>
  <tr ng-show="showDogs"><td>Dog</td><td>2</td></tr>
  <tr ng-show="showCats"><td>Cat</td><td>4</td></tr>
  <tr ng-show="showDogs"><td>Dog</td><td>3</td></tr>
  <tr ng-show="showCats"><td>Cat</td><td>5</td></tr>
  <tr ng-show="showLizards"><td>Lizard</td><td>1</td></tr>
  <tr ng-show="showLizards"><td>Lizard</td><td>3</td></tr>
  <tr ng-show="showMice"><td>Mouse</td><td>5</td></tr>
  <tr ng-show="showMice"><td>Mouse</td><td>1</td></tr>
  <tr ng-show="showDogs"><td>Dog</td><td>3</td></tr>
</table>

And links as follows:

<a href="#" ng-click="showRows('all')">Show all</a>
<a href="#" ng-click="showRows('cats')">Cats</a>
<a href="#" ng-click="showRows('dogs')">Dogs</a>
<a href="#" ng-click="showRows('lizards')">Lizards</a>
<a href="#" ng-click="showRows('mice')">Mice</a>

What's the proper way in Angular to hide/show each row when an animal type is clicked? I'm aware of filter, but I'm under the impression that that only works for tables generated in Angular using ng-repeat. (This table is being generated server-side.)

I have a working solution that manually sets each showAnimal variable to true/false based on what was clicked, but this seems like an inefficient, unscalable approach. Thanks!

wouldn't this be easier if you only generate a JSON corresponding to your table on server side ? This way you could easily use ng-repeat and filter, and it would be scalable, and quite efficient — DotDotDot
– DotDotDot, Commented Aug 3, 2013 at 20:47
I've went ahead and written a detailed blog post about hiding and showing elements in AngularJS. Hopefully it helps someone. — jetcom
– jetcom, Commented Sep 18, 2013 at 21:59

Andrew Ho · Accepted Answer · 2013-08-03 20:42:50Z

Given your constraints, you could do something like this: plunker demo

Controller

$scope.selected = 'all';
$scope.isShown = function(animal) {
  if ($scope.selected == 'all') {
    return true;
  }
  return $scope.selected == animal;
}

HTML

<select ng-model="selected">
  <option value="all">All</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="lizard">Lizard</option>
  <option value="mice">Mice</option>
</select>

<table>
  <tr ng-show="isShown('cat')"><td>Cat</td><td>1</td></tr>
  <tr ng-show="isShown('dog')"><td>Dog</td><td>2</td></tr>
  <tr ng-show="isShown('cat')"><td>Cat</td><td>4</td></tr>
  <tr ng-show="isShown('dog')"><td>Dog</td><td>3</td></tr>
  <tr ng-show="isShown('cat')"><td>Cat</td><td>5</td></tr>
  <tr ng-show="isShown('lizard')"><td>Lizard</td><td>1</td></tr>
  <tr ng-show="isShown('lizard')"><td>Lizard</td><td>3</td></tr>
  <tr ng-show="isShown('mice')"><td>Mouse</td><td>5</td></tr>
  <tr ng-show="isShown('mice')"><td>Mouse</td><td>1</td></tr>
  <tr ng-show="isShown('dog')"><td>Dog</td><td>3</td></tr>
</table>

Collectives™ on Stack Overflow

Show/hide table rows based on dynamic content in AngularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related