根据AngularJS中的动态内容显示/隐藏表格行？

Question

我有一个HTML表格如下:

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

链接如下:

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

在点击动物类型时,Angular隐藏/显示每一行的正确方法是什么？我知道过滤器,但我的印象是这只适用于在Angular中使用生成的表ng-repeat.(此表是在服务器端生成的.)

我有一个工作解决方案,showAnimal根据点击的内容手动将每个变量设置为true/false,但这似乎是一种低效,不可扩展的方法.谢谢!

Answer 1

鉴于你的限制,你可以做这样的事情:plunker demo

调节器

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