javascript 基于选择选项的 AngularJS ng-repeat 过滤器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16827768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS ng-repeat filter based on select option
提问by user1159790
I am new to AngularJS. I am trying to filter the data set shown based on the option selected with a select box.
我是 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>
I used the example given in http://docs.angularjs.org/api/ng.filter:filter, which uses an input box to filter. On selecting a given card, it seems to filter fine. However, when I select "All", which has its value set to "", it doesn't display all the entries (clear the filter). However, in the example shown, when the text box is cleared, all the entries are displayed.
我使用了http://docs.angularjs.org/api/ng.filter:filter 中给出的示例，它使用输入框进行过滤。在选择给定的卡片时，它似乎可以很好地过滤。但是，当我选择“全部”时，它的值设置为“”，它不会显示所有条目（清除过滤器）。但是，在所示示例中，当清除文本框时，将显示所有条目。
What am I doing wrong?
我究竟做错了什么？
采纳答案by Dan
You'll need to change your select to:
您需要将选择更改为：
<select name="show-filter" ng-model="searchText" ...
instead of
代替
<select name="show-filter" ng-model="searchText.accruedcard" ...
Explanation:From what I've seen, it's not common to use a hard-coded option along with ng-options and this is contributing to the problem. The filter uses the select's model, which currently is an object instead of a string as in the Angular example. Object patterns are okaybut in this case the object's properties become nullwhen All is selected because it is not wired into the select the same way as the rest of the options.
说明：据我所知，将硬编码选项与 ng-options 一起使用并不常见，这会导致问题。过滤器使用选择的模型，它当前是一个对象，而不是 Angular 示例中的字符串。对象模式没问题，但在这种情况下，对象的属性null在选择 All 时变为，因为它不像其他选项那样连接到选择中。
This is what causes the searchTextfilter to fail because it expects valid strings (even when using an object for the matching pattern).
这就是导致searchText过滤器失败的原因，因为它需要有效的字符串（即使使用对象作为匹配模式）。
By using a string primitive for the select's model, the All 'hack' is preserved because it causes the select's model to become ('') instead of null, which will match everything and all the results are shown.
通过为 select 的模型使用字符串原语，All 'hack' 得以保留，因为它导致 select 的模型变为 ( '') 而不是 null，这将匹配所有内容并显示所有结果。
回答by Costica Puntaru
I ran into the same problem. The way that I fixed it was using .toString()in the filter.
我遇到了同样的问题。我修复它的方式是.toString()在过滤器中使用。
