通过过滤特定的多个模型属性在AngularJS(以OR关系) [英] Filtering by Multiple Specific Model Properties in AngularJS (in OR relationship)

查看:93
本文介绍了通过过滤特定的多个模型属性在AngularJS(以OR关系)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

看看这里的例子:<一href=\"http://docs.angularjs.org/api/ng.filter%3afilter\">http://docs.angularjs.org/api/ng.filter:filter

您可以通过任何手机性能的使用搜索&LT;输入NG模型=搜索&GT; 键,你可以只是名字用搜索&LT;输入NG模型=search.name&GT; ,结果被适当地名称过滤(打字电话号码不返回任何结果,如预期)

可以说我有一个name属性,一个电话属性,一个秘密性质的模式,我怎么会去筛选通过的两个名称和手机的属性和不可以的秘密的属性?因此,在本质上,用户可以键入一个名称或电话号码和 NG-重复将正确地过滤,但即使在相当于的一个部分的值类型的用户秘密的价值,它不会返回任何东西。

感谢。


解决方案

下面是 plunker

新plunker;这里既有查询和搜索列表项是不区分大小写

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

DOC


  

功能:a predicate功能可用于写入任意过滤器。
  函数被调用为阵列的每个元素。最后的结果是
  一个数组的predicate退换真正的那些元素。


 &LT;输入NG模型=查询&GT;&LT; TR NG重复=智能手机智能手机|过滤器:搜索&GT;
 $ scope.search =功能(项目){
    如果(!$ scope.query ||(item.brand.toLowerCase()的indexOf($ scope.query)!= -1)||(item.model.toLowerCase()的indexOf($ scope.query.toLowerCase( ))!= - 1)){
        返回true;
    }
    返回false;
 };

Take a look at the example here: http://docs.angularjs.org/api/ng.filter:filter

You can search by any of the phone properties by using <input ng-model="search"> and you can search by just the name by using <input ng-model="search.name">, and the results are appropriately filtered by name (typing in a phone number does not return any results, as expected).

Lets say I have a model with a "name" property, a "phone" property, and a "secret" property, how would I go about filtering by both the "name" and "phone" properties and not the "secret" property? So in essence, the user could type a name or phone number and the ng-repeat would filter correctly, but even if the user typed in a value that equaled part of a "secret" value, it wouldn't return anything.

Thanks.

解决方案

Here is the plunker

New plunker with cleaner code & where both the query and search list items are case insensitive

Main idea is create a filter function to achieve this purpose.

From official doc

function: A predicate function can be used to write arbitrary filters. The function is called for each element of array. The final result is an array of those elements that the predicate returned true for.

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

这篇关于通过过滤特定的多个模型属性在AngularJS(以OR关系)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆