如何過濾列表中的項目而不打破其他過濾器？

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>