Javascript 如何使用多个链接过滤 AngularJS 中的列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14379934/
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
How to filter a list in AngularJS using several links
提问by Alon
I have been going over a lot of tutorials on how to filter a list and can't find an example for my simple use-case.
我已经阅读了很多关于如何过滤列表的教程，但找不到我的简单用例的示例。
I have several buttons such as
我有几个按钮，例如
<a href="#" id="filter-by-name">Name</a>
<a href="#" id="filter-by-age">Age</a>
<a href="#" id="filter-by-height">Height</a>
I have var persons = {...}object and I display it like
我有var persons = {...}对象，我像这样显示它
<div ng-repeat="person in persons">
{{person.name...}}
</div>
How do I create a filter so each time I will click on one of the buttons the list will be filtered ?
如何创建过滤器，以便每次单击其中一个按钮时都会过滤列表？
I have tried addingng-repeat="person in persons | filter:filterPersons"and on the script side to write:
我试过ng-repeat="person in persons | filter:filterPersons"在脚本端添加和写：
$scope.filterPersons(person){
if (person.name == "John")
return person;
}
but this is only one use-case (how can I filter by another name?) - in other words - How do I connect the links to the filter?
但这只是一个用例（如何按另一个名称过滤？） - 换句话说 -如何将链接连接到过滤器？
回答by Caio Cunha
You can bind your filter to scope variables as you do with any other thing. So all you need is to set the appropriated filter to the scope when the user click and bind it to the ng-repeatfilter param. See:
您可以像处理任何其他事情一样将过滤器绑定到作用域变量。因此，您只需要在用户单击并将其绑定到ng-repeat过滤器参数时将适当的过滤器设置为范围。看：
<div ng-app>
<span ng-click="myFilter = {type: 1}">Type 1</span> |
<span ng-click="myFilter = {type: 2}">Type 2</span> |
<span ng-click="myFilter = null">No filter</span>
<ul ng-controller="Test">
<li ng-repeat="person in persons | filter:myFilter">{{person.name}}</li>
</ul>
</div>
function Test($scope) {
$scope.persons = [{type: 1, name: 'Caio'}, {type:2, name: 'Ary'}, {type:1, name: 'Camila'}];
}
Notice that the myFilteris changed when the user clicks the filter, and that it's bound to the ng-repeatfilter. Fiddle here. You could also create a new filter, but this solution is far better.
请注意，myFilter当用户单击过滤器时， 会发生变化，并且它已绑定到ng-repeat过滤器。在这里摆弄。您也可以创建一个新过滤器，但此解决方案要好得多。
回答by Winnemucca
My response is very similar to Caio's. I just wanted to show how to filter out an existing array.
我的回答与 Caio 的非常相似。我只是想展示如何过滤掉现有的数组。
In my ng-repeat I have a search filter that goes through the words. I wanted tabs to look for a string match. So I added a additional filter
在我的 ng-repeat 中，我有一个遍历单词的搜索过滤器。我想要选项卡来查找字符串匹配。所以我添加了一个额外的过滤器
<tr class="unEditableDrinks" ng-repeat="drink in unEditableDrinkList | orderBy:'-date'|limitTo:400|filter:search |filter:myFilter">
<td>[[drink.name]]</td>
I only have the top part of my table but this should show the strategy. The second filter called myFilter is attached to the buttons below.
我只有桌子的顶部，但这应该显示策略。名为 myFilter 的第二个过滤器附加到下面的按钮。
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" ng-click="myFilter={name:'soda'}">Soda</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" ng-click="myFilter={name:'energy'}">Energy Drinks</button>
</div>
On each button I am able to add a ng-click that goes through myFilter and searches the td with drink.name. In each ng-click I can set the value of name to search. So every title containing soda or energy can be filtered through.
在每个按钮上，我都可以添加一个 ng-click，它通过 myFilter 并使用drink.name 搜索 td。在每次 ng-click 中，我可以设置要搜索的名称值。因此，每个包含苏打水或能量的标题都可以过滤掉。
