时间戳

首页 > 解决方案 > 当用户在选择中选择默认值时删除过滤器

javascript - 当用户在选择中选择默认值时删除过滤器

问题描述

我对默认的 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>

标签： javascriptangularjsangularjs-ng-repeatangularjs-filterangularjs-select

解决方案

对于您的使用要求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;
    }
})

这是一个工作小提琴

推荐阅读