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;
    }
})

这里是Working Fiddle

当用户在select

1 个答案: