基于选择选项的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一起使用并不常见，这导致了问题。过滤器使用选择模型，该模型当前是对象而不是Angular示例中的字符串。 Object patterns are okay，但是在这种情况下，选择“全部”时对象的属性将变为null，因为它的连接方式与其余选项不同。
这是searchText过滤器失败的原因，因为它期望有效的字符串（即使将对象用于匹配模式也是如此）。>>
通过将字符串原语用于选择模型，保留了所有'hack'，因为这会导致选择模型变成（''）而不是null，它将匹配所有内容，并显示所有结果。

Answer 2

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