当用户 select 在 select 中使用默认值时删除过滤器

Question

我对默认 angularjs 过滤器功能有一些疑问。当数据第一次加载时，数据加载时没有任何过滤器 applied.That 是预期的，当我从下拉列表中 selects 时，过滤器按预期工作，当 [=23] 时过滤 data.But =]s 返回 select 下拉列表中的所有选项，它不会在没有任何过滤器的情况下重新绑定所有数据 applied.I 需要在用户 select 什么都没有的情况下重新绑定所有数据而不使用过滤器.据我所知，它应该可以工作，我不确定我是什么 missing.Here OldconversationList 是对象数组。每个对象又具有多个数组对象。

还有一项要求是：

当用户从下拉列表中 select 并在搜索文本文本框中输入一些文本时，它必须使用两个搜索条件应用过滤器。如果用户没有从下拉列表中 select 任何内容并在其中输入一些文本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 在 select 中使用默认值时删除过滤器

Remove filter when user selects default value in select

javascript

angularjs

angularjs-ng-repeat

angularjs-filter

angularjs-select