6

我是 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中给出的示例，它使用输入框进行过滤。在选择给定的卡片时，它似乎过滤得很好。但是，当我选择“全部”时，它的值设置为“”，它不会显示所有条目（清除过滤器）。但是，在所示示例中，当清除文本框时，将显示所有条目。

我究竟做错了什么？

4

2 回答 2

5

您需要将您的选择更改为：

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

代替

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

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

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

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

于 2013-05-30T05:25:17.667 回答
0

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

于 2014-03-04T11:51:14.893 回答