AngularJS: API: ng/filter/filter

Filter

- filter in module ng

从array中选择一个条目子集，并作为一个新数组返回。

用法

用于HTML模板绑定

{{filter_expression|filter:expression:comparator}}

用于JavaScript

$filter('filter')(array,expression,comparator)

参数

参数类型详述

array

Array

参数	类型	详述
array	Array	源数组。
expression	stringObjectfunction()	从`array`选择条目时的条件。可以为以下之一： `string`:作为表达式计算的字符串，计算结果作为子串匹配`array`中的内容。`array`中包含这个字符串的所有字符串或字符串属性对象会返回。字符串前可以放置`!`表示相反条件。 `Object`: 一个模式对象，用于过滤`array`中对象的指定属性。例如`{name:"M",phone:"1"}`表示返回数据组中属性`name`包含 "M" 和属性`phone`包含 "1"的条目。可以使用特殊属性名`$`(as in`{$:"text"}`) 来匹配对象中的所有属性。这相当于上面描述的使用`string`进行的子串简单匹配。 `Function(value)`: 一个自定义过滤方法的函数。这个函数被每个`array`中的元素调用。最终结果为返回true的元素的数组。
comparator	function(actual, expected)trueundefined	用于检测期望值(来自过滤表达式)和实际值(来自数组中的实际对象)是否匹配的比较器。可以为以下之一： `Function(actual,expected)`: 这个函数会传入对象值和期望值来比较，如果条目返回true就会被包含在过滤结果中。 `true`:`Function(actual,expected){returnangular.equals(expected,actual)}`的便捷写法。它对期望值和实际值进行强比较。 `false\|undefined`: 一个不区分大小写的子串匹配函数的便捷写法。

源数组。

expression

stringObjectfunction()

从array选择条目时的条件。

可以为以下之一：

string:作为表达式计算的字符串，计算结果作为子串匹配array中的内容。array中包含这个字符串的所有字符串或字符串属性对象会返回。字符串前可以放置!表示相反条件。
Object: 一个模式对象，用于过滤array中对象的指定属性。例如{name:"M",phone:"1"}表示返回数据组中属性name包含 "M" 和属性phone包含 "1"的条目。可以使用特殊属性名$(as in{$:"text"}) 来匹配对象中的所有属性。这相当于上面描述的使用string进行的子串简单匹配。
Function(value): 一个自定义过滤方法的函数。这个函数被每个array中的元素调用。最终结果为返回true的元素的数组。

comparator

function(actual, expected)trueundefined

用于检测期望值(来自过滤表达式)和实际值(来自数组中的实际对象)是否匹配的比较器。

可以为以下之一：

Function(actual,expected): 这个函数会传入对象值和期望值来比较，如果条目返回true就会被包含在过滤结果中。
true:Function(actual,expected){returnangular.equals(expected,actual)}的便捷写法。它对期望值和实际值进行强比较。
false|undefined: 一个不区分大小写的子串匹配函数的便捷写法。

示例

index.html

ng-init="friends = [{name:'John', phone:'555-1276'}, {name:'Mary', phone:'800-BIG-MARY'}, {name:'Mike', phone:'555-4321'}, {name:'Adam', phone:'555-5678'}, {name:'Julie', phone:'555-8765'}, {name:'Juliette', phone:'555-5678'}]">

Search:ng-model="searchText">id="searchTextResults">名称Phoneng-repeat="friend in friends | filter:searchText">{{friend.name}}{{friend.phone}}Any:ng-model="search.$">
Name onlyng-model="search.name">
Phone onlyng-model="search.phone">
EqualityType="checkbox"ng-model="strict">
id="searchObjResults">名称Phoneng-repeat="friendObj in friends | filter:search:strict">{{friendObj.name}}{{friendObj.phone}}

protractor.js

varexpectFriendNames=Function(expectedNames,key){element.all(by.repeater(key+' in friends').column(key+'.name')).then(Function(arr){arr.forEach(Function(wd,i){expect(wd.getText()).toMatch(expectedNames[i]);});});};it('should search across all fields when filtering with a string',Function(){varsearchText=element(by.model('searchText'));searchText.clear();searchText.sendKeys('m');expectFriendNames(['Mary','Mike','Adam'],'friend');searchText.clear();searchText.sendKeys('76');expectFriendNames(['John','Julie'],'friend');});it('should search in specific fields when filtering with a predicate object',Function(){varsearchAny=element(by.model('search.$'));searchAny.clear();searchAny.sendKeys('i');expectFriendNames(['Mary','Mike','Julie','Juliette'],'friendObj');});it('should use a equal comparison when comparator is true',Function(){varsearchName=element(by.model('search.name'));varstrict=element(by.model('strict'));searchName.clear();searchName.sendKeys('Julie');strict.click();expectFriendNames(['Julie'],'friendObj');});

Vorheriger Artikel： Nächster Artikel：