如何基于AngularJS中的选项值隐藏表行？

Question

所以我有一个下拉列表。

<select ng-model="dropdown">
    <option ng-value="1">1</option>
    <option ng-value="2">2</option>
    <option ng-value="all">All</option>
</select>

和一张桌子..

<table>
    <tr ng-repeat="d in data">
        <td ng-bind="d.number"></td> // 0 or 1
        <td>Other TD's</td>
        <td>Other TD's</td>
    </tr>
</table>

我想做的是，当我在下拉列表中选择数字2时，表中的所有其他行将被隐藏，只有ng-bind="d.number"等于2的行除外。

所以我到目前为止尝试的是

<table>
    <tr ng-repeat="d in data" ng-if="d.number == dropdown">
        <td ng-bind="d.number"></td> // 0 or 1
        <td>Other TD's</td>
        <td>Other TD's</td>
    </tr>
</table>

但是，当我在下拉列表中选择all时，该表已经为空。

有没有更清洁的方法可以做到这一点？ 提前致谢。

Answer 1

您可以使用角度filter执行以下操作： Plunkr

<table>
<tr ng-repeat="d in data | filter: {number: dropdown||undefined}">
 <td ng-bind="d.number"></td> // 0 or 1
 <td>Other TD's</td>
 <td>Other TD's</td>
</tr>
</table>