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隐藏/显示每一行的正确方法是什么？我知道filter，但我的印象是，这只适用于使用ng-repeat在Angular中生成的表格。（此表是在服务器端生成的。）

我有一个可行的解决方案，根据点击的内容手动将每个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>

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

1 个答案: