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＆＃34; status＆＃34;并且您正在使用名为Status的属性和＆＃34;任何＆＃34;选项有空值。

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

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

1 个答案: