通过AngularJS中的多个特定模型属性进行过滤(OR关系)

Question

看一下这里的例子:http://docs.angularjs.org/api/ng.filter: filter

您可以使用任何电话属性进行<input ng-model="search">搜索,您可以使用名称进行搜索<input ng-model="search.name">,并按名称对结果进行适当过滤(输入电话号码不会返回任何结果,如预期的那样).

比方说,我有一个"名称"属性,"电话"属性,一个"秘密"性质的模型,我怎么会去通过过滤都在"名称"和"电话"属性和没有 "秘密"属性？所以从本质上讲,用户可以键入一个名称或电话号码,并且ng-repeat可以正确过滤,但即使用户输入的值等于"秘密"值的一部分,它也不会返回任何内容.

谢谢.

Answer 1

这是掠夺者

新的plunker具有更清晰的代码,并且查询和搜索列表项都不区分大小写

主要思想是创建一个过滤功能来实现这一目的.

来自官方文件

function:谓词函数可用于写入任意过滤器.为数组的每个元素调用该函数.最终结果是谓词返回true的那些元素的数组.

<input ng-model="query">

<tr ng-repeat="smartphone in smartphones | filter: search "> 

$scope.search = function(item) {
    if (!$scope.query || (item.brand.toLowerCase().indexOf($scope.query) != -1) || (item.model.toLowerCase().indexOf($scope.query.toLowerCase()) != -1) ){
        return true;
    }
    return false;
};

更新

有些人可能会关注现实世界中的表现,这是正确的.

在现实世界中,我们可能会从控制器中做这种过滤器.

下面是详细职位说明如何做到这一点.

简而言之,我们添加ng-change了用于监控新搜索更改的输入

然后触发过滤功能.

Answer 2

您可以将Object作为参数传递给过滤器表达式,如API参考中所述.此对象可以选择性地应用您感兴趣的属性,如下所示:

<input ng-model="search.name">
<input ng-model="search.phone">
<input ng-model="search.secret">
<tr ng-repeat="user in users | filter:{name: search.name, phone: search.phone}">

这是一个Plunker

抬头......这个例子适用于AngularJS 1.1.5,但在1.0.7中并不总是如此.在此示例中,1.0.7将初始化所有已过滤的内容,然后在您开始使用输入时工作.它的行为就像输入中有不匹配的值,即使它们开始是空白的.如果您希望保持稳定版本,请继续尝试以适应您的情况,但有些情况可能需要使用@maxisam的解决方案,直到1.2.0发布.

Answer 3

我从@maxisam的答案中激发了自己,并创建了我自己的排序功能,但我会分享它(因为我很无聊).

情况 我想过滤一系列汽车.要筛选的选定属性是名称,年份,价格和公里.房产价格和公里是数字(因此使用.toString).我也想控制大写字母(因此.toLowerCase).此外,我希望能够将我的过滤器查询拆分为不同的单词(例如,根据过滤器2006 Acura,它找到与年份匹配的2006和具有名称的Acura).

功能我传递给过滤器

        var attrs = [car.name.toLowerCase(), car.year, car.price.toString(), car.km.toString()],
            filters = $scope.tableOpts.filter.toLowerCase().split(' '),
            isStringInArray = function (string, array){
                for (var j=0;j<array.length;j++){
                    if (array[j].indexOf(string)!==-1){return true;}
                }
                return false;
            };

        for (var i=0;i<filters.length;i++){
            if (!isStringInArray(filters[i], attrs)){return false;}
        }
        return true;
    };

Answer 4

如果你愿意使用第三方库,那么带有很多过滤器的'Angular Filters'可能会很有用:

https://github.com/a8m/angular-filter#filterby

collection | filterBy: [prop, nested.prop, etc..]: search