AngularJS。通过选择框过滤表格行

Question

我有一个表，其中的行显示为 ng-repeat 。我还有一个<select> 。我的表行按属性过滤，在 <select> 中选择。代码如下:

Controller :

$scope.transactionTypes = [
  "All",
  "Bonus received",
  "Invoice payment",
  "Taxes",
  "Credit transfers",
  "Withdrawals",
  "Cancelled transactions"
];

$scope.tableFilter = {};

$scope.transactions = [
   {
      "transactionType" : "Taxes"
   },
   {
      "transactionType" : "Bonus received"
   }
]

HTML:

<select ng-model="tableFilter.transactionType"
        ng-options="transactionType for transactionType in transactionTypes">
</select>

<table>
    <tr ng-repeat="item in (transactions | filter:{transactionType:tableFilter.transactionType)">
       <td>{{item.transactionType}}</td>
    </tr>
</table>

我尽可能地为您简化了我的代码。我希望我已经足够清楚地描述了我的情况。

我的问题是:当我在<select>中选择“全部”属性时，显示所有交易(具有任何交易类型)的最简单方法是什么？ ？如何通过在<select>中选择“全部”来清除此过滤器？

谢谢。

Answer 1

如果 transactionType 为“All”，则将 transactionType 的值设置为“”，并且不会应用任何过滤器。

<select ng-model="tableFilter.transactionType" ng-options="'All' == transactionType ? '' : transactionType as transactionType for transactionType in transactionTypes"></select>