javascript - 如何使用 ng-hide 和 ng-repeat 根据条件显示元素

Question

我正在使用 AngularJS，并且我有一个项目表，我希望能够根据其颜色显示这些项目。例如，如果我单击“显示绿色”和“显示红色”复选框，则表格将仅显示绿色或红色的项目。

这是项目对象:

{"name":"Fire Truck", "color":"red"}

这是我的复选框，单击时将评估为 TRUE 或 FALSE:

<select id="item_color" ng-model='color'>
   <option value='green'>SHOW GREEN</option>
   <option value='red'>SHOW RED</option>
   <option value='blue'>SHOW BLUE</option>
</select>

这是我的表格:

<tr ng-repeat="item in items" ng-hide='???'>
   <td>{{item.name}} </td>
   <td>{{item.color}} </td>
</tr>

那么我怎样才能让我的表格动态显示所需的项目呢？理想的解决方案还允许我为每种颜色的所有项目列出 3 个单独的表。我对如何解决这个问题有点困惑。有什么想法吗？

Answer 1

<tr ng-repeat="item in items" ng-hide='item.color !== color'>
   <td>{{item.name}} </td>
   <td>{{item.color}} </td>
</tr>

就这么简单。或者，使用 ng-if 根本不消除逆:

<tr ng-repeat="item in items" ng-if='item.color === color'>
   <td>{{item.name}} </td>
   <td>{{item.color}} </td>
</tr>