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

AngularJS ng-repeat filter based on select option

本文关键字：select 选项 过滤器 ng-repeat AngularJS      更新时间：2023-09-26

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

我做错了什么?

你需要改变你的选择为:

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

代替

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

解释:据我所见，硬编码选项与ng-options一起使用是不常见的，这是导致问题的原因。过滤器使用select的模型，它目前是一个对象，而不是像Angular的例子中那样是一个字符串。对象模式是可以的，但是在这种情况下，当All被选中时，对象的属性变成了null，因为它没有像其他选项一样连接到选择中。

这就是导致searchText过滤器失败的原因，因为它期望有效的字符串(即使在使用对象进行匹配模式时)。

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

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

相关文章：