目录搜索
AngularJS API Referenceautoauto/serviceauto/service/$injectorauto/service/$providengng/directiveng/directive/ang/directive/formng/directive/inputng/directive/input[checkbox]ng/directive/input[date]ng/directive/input[dateTimeLocal]ng/directive/input[email]ng/directive/input[month]ng/directive/input[number]ng/directive/input[radio]ng/directive/input[text]ng/directive/input[time]ng/directive/input[url]ng/directive/input[week]ng/directive/ngAppng/directive/ngBindng/directive/ngBindHtmlng/directive/ngBindTemplateng/directive/ngBlurng/directive/ngChangeng/directive/ngCheckedng/directive/ngClassng/directive/ngClassEvenng/directive/ngClassOddng/directive/ngClickng/directive/ngCloakng/directive/ngControllerng/directive/ngCopyng/directive/ngCspng/directive/ngCutng/directive/ngDblclickng/directive/ngDisabledng/directive/ngFocusng/directive/ngFormng/directive/ngHideng/directive/ngHrefng/directive/ngIfng/directive/ngIncludeng/directive/ngInitng/directive/ngKeydownng/directive/ngKeypressng/directive/ngKeyupng/directive/ngListng/directive/ngModelng/directive/ngModelOptionsng/directive/ngMousedownng/directive/ngMouseenterng/directive/ngMouseleaveng/directive/ngMousemoveng/directive/ngMouseoverng/directive/ngMouseupng/directive/ngNonBindableng/directive/ngOpenng/directive/ngPasteng/directive/ngPluralizeng/directive/ngReadonlyng/directive/ngRepeatng/directive/ngSelectedng/directive/ngShowng/directive/ngSrcng/directive/ngSrcsetng/directive/ngStyleng/directive/ngSubmitng/directive/ngSwitchng/directive/ngTranscludeng/directive/ngValueng/directive/scriptng/directive/selectng/directive/textareang/filterng/filter/currencyng/filter/dateng/filter/filterng/filter/jsonng/filter/limitTong/filter/lowercaseng/filter/numberng/filter/orderByng/filter/uppercaseng/functionng/function/angular.bindng/function/angular.bootstrapng/function/angular.copyng/function/angular.elementng/function/angular.equalsng/function/angular.extendng/function/angular.forEachng/function/angular.fromJsonng/function/angular.identityng/function/angular.injectorng/function/angular.isArrayng/function/angular.isDateng/function/angular.isDefinedng/function/angular.isElementng/function/angular.isFunctionng/function/angular.isNumberng/function/angular.isObjectng/function/angular.isStringng/function/angular.isUndefinedng/function/angular.lowercaseng/function/angular.moduleng/function/angular.noopng/function/angular.toJsonng/function/angular.uppercaseng/objectng/object/angular.versionng/providerng/provider/$animateProviderng/provider/$compileProviderng/provider/$controllerProviderng/provider/$filterProviderng/provider/$httpProviderng/provider/$interpolateProviderng/provider/$locationProviderng/provider/$logProviderng/provider/$parseProviderng/provider/$rootScopeProviderng/provider/$sceDelegateProviderng/provider/$sceProviderng/serviceng/service/$anchorScrollng/service/$animateng/service/$cacheFactoryng/service/$compileng/service/$controllerng/service/$documentng/service/$exceptionHandlerng/service/$filterng/service/$httpng/service/$httpBackendng/service/$interpolateng/service/$intervalng/service/$localeng/service/$locationng/service/$logng/service/$parseng/service/$qng/service/$rootElementng/service/$rootScopeng/service/$sceng/service/$sceDelegateng/service/$templateCacheng/service/$timeoutng/service/$windowng/typeng/type/$cacheFactory.Cacheng/type/$compile.directive.Attributesng/type/$rootScope.Scopeng/type/angular.Moduleng/type/form.FormControllerng/type/ngModel.NgModelControllerngAnimatengAnimate/providerngAnimate/provider/$animateProviderngAnimate/servicengAnimate/service/$animatengCookiesngCookies/servicengCookies/service/$cookiesngCookies/service/$cookieStorengMessagesngMessages/directivengMessages/directive/ngMessagengMessages/directive/ngMessagesngMockngMock/functionngMock/function/angular.mock.dumpngMock/function/angular.mock.injectngMock/function/angular.mock.modulengMock/objectngMock/object/angular.mockngMock/providerngMock/provider/$exceptionHandlerProviderngMock/servicengMock/service/$exceptionHandlerngMock/service/$httpBackendngMock/service/$intervalngMock/service/$logngMock/service/$timeoutngMock/typengMock/type/angular.mock.TzDatengMockE2EngMockE2E/servicengMockE2E/service/$httpBackendngResourcengResource/servicengResource/service/$resourcengRoutengRoute/directivengRoute/directive/ngViewngRoute/providerngRoute/provider/$routeProviderngRoute/servicengRoute/service/$routengRoute/service/$routeParamsngSanitizengSanitize/filterngSanitize/filter/linkyngSanitize/servicengSanitize/service/$sanitizengTouchngTouch/directivengTouch/directive/ngClickngTouch/directive/ngSwipeLeftngTouch/directive/ngSwipeRightngTouch/servicengTouch/service/$swipe
文字

AngularJS: API: ng/filter/filter

Filter

  1. - filter in module ng

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

用法

用于HTML模板绑定

{{ filter_expression | filter : expression : comparator}}

用于JavaScript

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

参数

参数 类型 详述
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) { return angular.equals(expected, actual)}的便捷写法。它对期望值和实际值进行强比较。

  • false|undefined: 一个不区分大小写的子串匹配函数的便捷写法。

示例

index.html
<div 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'}]"></div>

Search: <input ng-model="searchText">
<table id="searchTextResults">
  <tr><th>名称</th><th>Phone</th></tr>
  <tr ng-repeat="friend in friends | filter:searchText">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
  </tr>
</table><hr>
Any: <input ng-model="search.$"> <br>
Name only <input ng-model="search.name"><br>
Phone only <input ng-model="search.phone"><br>
Equality <input Type="checkbox" ng-model="strict"><br>
<table id="searchObjResults">
  <tr><th>名称</th><th>Phone</th></tr>
  <tr ng-repeat="friendObj in friends | filter:search:strict">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
  </tr>
</table>
protractor.js
var expectFriendNames = 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() {
  var searchText = 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() {
  var searchAny = 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() {
  var searchName = element(by.model('search.name'));
  var strict = element(by.model('strict'));
  searchName.clear();
  searchName.sendKeys('Julie');
  strict.click();
  expectFriendNames(['Julie'], 'friendObj');});
上一篇:下一篇: