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

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”，并且您正在按名为 Status 的属性进行过滤，并且“Any”选项具有空白值。

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