當用戶在選擇中選擇默認值時刪除過濾器

Question

我對默認的 angularjs 過濾器功能有一些問題。 當數據加載首次在沒有應用的任何過濾器時加載數據時。當預期，並且當我從濾波器中刪除濾波器時從下拉濾波器工作時，請在選擇下拉的選擇中選擇返回所有選項時。沒有在沒有應用任何過濾器的情況下重新綁定所有數據。當用戶不選擇任何內容時，我需要重新綁定所有數據而沒有過濾器。 據我所知，它應該可以工作，我不確定我錯過了什么。這里的 OldconversationList 是對象數組。每個對象又具有多個數組對象。

還有一個要求是：

當用戶從下拉列表中選擇並在 searchtext 文本框中輸入一些文本時，它必須使用兩個搜索條件應用過濾器。如果用戶沒有從下拉列表中選擇任何內容並在 searchtext 文本框中輸入一些文本，則過濾器應應用於所有輸入文本的數據. 請幫忙解決這個問題

<div class="modal-body">
                <div class="row" style="padding-bottom:10px">                        
                    <div class="form-group" style="margin:0px">
                        <label class="control-label col-xs-1">Team</label>
                        <div class="col-xs-3">
                            <select ng-model="query" class="form-control input-sm" ng-options="item.TeamID as item.TeamName for item in teams">
                                <option value="">All</option>
                            </select>
                        </div>
                        <div class="col-xs-6">
                            <input type="text" id=searchtext" ng-model="textquery" class="form-control form-control-lg"  placeholder="Search Here" />
                        </div>
                    </div>
                </div>
                <div ng-repeat="conv in OldconversationList | filter :query">
                    <div class="chat_list" data-id="{{conv.GroupID}}" ng-click="currconvid !=conv.GroupID ?loadConver(conv):angular.noop()">
                        <div class="chat_people">
                            <div class="chat_ib">
                                <h5>{{conv.GroupName}}
<span class="chat_date">{{ conv.LastMessageDate|date:'MM/dd/yyyy'}}</span></h5>

                            </div>

                        </div>

                    </div>

                </div>
            </div>

Answer 1

對於您也使用textquery的要求，只需將其添加為過濾器：

"conv in OldconversationList | filter :query | filter :textquery"

當您重新選擇All時，您的過濾器沒有按預期工作的原因是因為當您再次選擇它時，Angular 將模型設置為null 。 這與undefined的空值不匹配。 您可以通過在模型上設置手表並將其轉換回undefined如果它變為null來修復它：

$scope.$watch('query', function(vNew, vOld){
    if(vNew === null){
        $scope.query = undefined;
    }
})

這是一個工作小提琴