如何过滤列表中的项目而不打破其他过滤器？

Question

我有我的显示使用下表

<table> 
<tr><th>Title</th><th>Status</th><th><a href="" ng-click="sortField ='StartDateTime'; reverse = !reverse">Start Date</a></th></tr> 

<tr ng-repeat="eachEvent in Events | filter:query | orderBy:sortField:reverse"> 
    <td><span>{{eachEvent.Title}}</span></td> 
    <td><span>{{eachEvent.Status}}</span></td> 
    <td><span>{{eachEvent.StartDateTime|date:'fullDate'}}</span></td> 
</tr> 
</table> 

它可以很好地为我的活动的集合，我可以通过点击标题开始日期更改排序顺序。我的问题如下。我想作一个选择象下面这样：

<select class="form-control"> 
    <option selected="selected">Any</option> 
    <option>InProgress</option> 
    <option>Completed</option> 
    <option>Canceled</option> 
</select> 

我想过滤使用选定的选项，在表格中的项目。我想我可以制作一个过滤器来处理这个问题，但我不知道如何在ng-repeat中使用我的过滤器，而不是弄乱我的其他过滤器。

感谢您的输入。

Answer 1

有几种方法可以做到这一点。

您可以链接您的过滤器：

<tr ng-repeat="eachEvent in Events | filter: {Status: status} | filter:query | orderBy:sortField:reverse"> 
    <td><span>{{eachEvent.Title}}</span></td> 
    <td><span>{{eachEvent.Status}}</span></td> 
    <td><span>{{eachEvent.StartDateTime|date:'fullDate'}}</span></td> 
</tr> 

，也可以使用$匹配任何您的过滤器合并成一个：

<tr ng-repeat="eachEvent in Events | filter: {$: query, Status: status} | orderBy:sortField:reverse"> 
    <td><span>{{eachEvent.Title}}</span></td> 
    <td><span>{{eachEvent.Status}}</span></td> 
    <td><span>{{eachEvent.StartDateTime|date:'fullDate'}}</span></td> 
</tr> 

或者，您可以创建，它决定了过滤的自定义功能并将其传递给过滤器

这些都假定以下选择具有“状态”的ngModel，并且您正在过滤由一个名为Status的房产和“任何”选项有一个空白值。

<select class="form-control" ng-model="status"> 
    <option selected="selected" value="">Any</option> 
    <option>InProgress</option> 
    <option>Completed</option> 
    <option>Canceled</option> 
</select>