基于选择选项的 AngularJS ng-repeat 过滤器

Question

我是 AngularJS 的新手。 我正在尝试根据使用选择框选择的选项过滤显示的数据集。

<div ng-controller="CurrentTrandetailsController">
   <div>
      <div class="pull-right">
         <label for="show-filter" class="show-label">Show </label>
         <select name="show-filter" ng-model="searchText.accruedcard" id="show-filter" ng-options="trandetail.accruedcard as trandetail.accruedcard for trandetail in currentTrandetails.trandetails ">
            <option value="">All</option>
         </select>
      </div>
      <h3>Current trandetails</h3>
   </div>
   <div>
      <table class="table table-striped table-hover">
         <tbody>
            <tr ng-repeat="trandetail in currentTrandetails.trandetails | filter:searchText">
               <td>{{trandetail.dateAccrued}}</td>
               <td>{{trandetail.accruedcard}}</td>
               <td>{{trandetail.placeAccrued}}</td>
               <td>{{trandetail.discountcents}}</td>
               <td>{{trandetail.shortExpiryDate}}</td>
            </tr>
         </tbody>
      </table>
   </div>
</div>

我使用了http://docs.angularjs.org/api/ng.filter:filter 中给出的示例，它使用输入框进行过滤。 在选择给定的卡片时，它似乎过滤得很好。 但是，当我选择“全部”（其值设置为“”）时，它不会显示所有条目（清除过滤器）。 但是，在所示示例中，当清除文本框时，将显示所有条目。

我究竟做错了什么？

Answer 1

您需要将选择更改为：

<select name="show-filter"  ng-model="searchText" ...

代替

<select name="show-filter"  ng-model="searchText.accruedcard" ...

说明：据我所知，将硬编码选项与 ng-options 一起使用并不常见，这会导致问题。 过滤器使用 select 的模型，它当前是一个对象，而不是 Angular 示例中的字符串。 对象模式是可以的，但在这种情况下，当所有选中时，对象的属性变为null ，因为它未连接到选择与其他选项的其他方式相同的方式。

这就是导致searchText过滤器失败的原因，因为它需要有效的字符串（即使使用对象作为匹配模式）。

通过为 select 的模型使用字符串原语，All 'hack' 得以保留，因为它导致 select 的模型变为 ( '' ) 而不是 null，它将匹配所有内容并显示所有结果。

Answer 2

我遇到了同样的问题。 我修复它的方法是在过滤器中使用.toString() 。