欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angularjs中如何使用filterFilter函數(shù)過(guò)濾

 更新時(shí)間:2016年02月06日 10:00:39   作者:Darren Ji  
這篇文章主要介紹了Angularjs中如何使用filterFilter函數(shù)過(guò)濾的相關(guān)資料,需要的朋友可以參考下

AngularJS的filter,中文名“過(guò)濾器”是用來(lái)過(guò)濾變量的值,或者格式化輸出,得到自己所期望的結(jié)果或格式的東東。AngularJS中有一個(gè)filterFilter函數(shù)用來(lái)對(duì)集合過(guò)濾,非常方便。

源代碼大致如下:

function filterFilter(){
return function(aray, expression comparator){
if(!isArray(array)) return array;
var comparatorType = typeof(comparator),
predicates = [],
evaluatedObjects = [];
predicates.check = function(value){
for(var j = 0; j < predicates.length; jii){
if(!predicates[j](value){
return false;
})
}
return true;
} 
if(comparatorType != 'function'{
if(comparatorType === 'boolean' && comparator){
comparator = function(obj, text){
return angular.equals(obj, text);
}
} else {
comparator = function(obj, text){
...
}
}
}) 
}
}

controller部分如下:

angular
.module('app')
.controller('MainCtrl', ['$scope',
function($scope) {
$scope.users = $scope.users = [
{name: '', email: '', joined: 2015-1-1}
];
$scope.filter = {
fuzzy: '',
name: ''
};
...
}]);

搜索所有任意字段

<input type="text" ng-model="filter.any" >
<tr ng-repeat="user in users | filter: filter.any">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.joined | date}}</td>
</tr>

搜索某個(gè)字段

<input type="text" ng-model="filter.name">
<tr ng-repeat="user in users 
| filter: filter.any
| filter: {name: filter.name}">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.joined | date}}</td>
</tr>

如果想name字段完全匹配:

<tr ng-repeat="user in users 
| filter: filter.any
| filter: {name: filter.name}:true">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.joined | date}}</td>
</tr>

搜索時(shí)間段

contrlller部分修改為:

angular
.module('app')
.controller('MainCtrl', ['$scope',
function($scope) {
$scope.users = $scope.users = [
{name: '', email: '', joined: 2015-1-1}
];
$scope.filter = {
fuzzy: '',
name: ''
};
$scope.minDate = new Date('January 1, 2000');
$scope.maxDate = new Date();
$scope.min = function(actual, expected) {
return actual >= expected;
};
$scope.max = function(actual, expected) {
return actual <= expected;
};
}]);

頁(yè)面部分為:

<input type="text" ng-model="fromDate" data-min-date="{{minDate}}">
<input type="text" ng-model="untilDate" data-max-date="{{maxDate}}">
<tr ng-repeat="user in users 
| filter: filter.any
| filter: {name: filter.name}
| filter: {joined: untilDate}:max
| filter: {joined: beforeDate}:min">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.joined | date}}</td>
</tr>

以上所述是小編給大家分享的Angularjs中如何使用filterFilter函數(shù)過(guò)濾的相關(guān)知識(shí),希望對(duì)大家有所幫助。

相關(guān)文章

  • 簡(jiǎn)單談?wù)剅equire模塊化jquery和angular的問(wèn)題

    簡(jiǎn)單談?wù)剅equire模塊化jquery和angular的問(wèn)題

    下面小編就為大家?guī)?lái)一篇簡(jiǎn)單談?wù)剅equire模塊化jquery和angular的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • AngularJS優(yōu)雅的自定義指令

    AngularJS優(yōu)雅的自定義指令

    這篇文章主要介紹了AngularJS優(yōu)雅的自定義指令,告訴大家為什么使用AngularJS自定義指令,以及如何使用AngularJS自定義指令?感興趣的小伙伴們可以參考一下
    2016-07-07
  • 基于Angular中ng-controller父子級(jí)嵌套的相關(guān)屬性詳解

    基于Angular中ng-controller父子級(jí)嵌套的相關(guān)屬性詳解

    今天小編就為大家分享一篇基于Angular中ng-controller父子級(jí)嵌套的相關(guān)屬性詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-10-10
  • AngularJS指令詳解及示例代碼

    AngularJS指令詳解及示例代碼

    本文主要介紹AngularJS指令,這里整理了簡(jiǎn)單的指令并附示例代碼,有需要的小伙伴可以參考下
    2016-08-08
  • 詳解為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法

    詳解為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法

    所謂攔截器就是在目標(biāo)達(dá)到目的地之前對(duì)其進(jìn)行處理以便處理結(jié)果更加符合我們的預(yù)期。Angular的$http攔截器是通過(guò)$httpProvider.interceptors數(shù)組定義的一組攔截器,每個(gè)攔截器都是實(shí)現(xiàn)了某些特定方法的Factory。本文就介紹了為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法。
    2016-12-12
  • Angularjs Ng_repeat中實(shí)現(xiàn)復(fù)選框選中并顯示不同的樣式方法

    Angularjs Ng_repeat中實(shí)現(xiàn)復(fù)選框選中并顯示不同的樣式方法

    今天小編就為大家分享一篇Angularjs Ng_repeat中實(shí)現(xiàn)復(fù)選框選中并顯示不同的樣式方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • 詳解Angular2組件之間如何通信

    詳解Angular2組件之間如何通信

    本篇文章主要介紹了詳解Angular2組件之間如何通信,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • angular學(xué)習(xí)之從零搭建一個(gè)angular4.0項(xiàng)目

    angular學(xué)習(xí)之從零搭建一個(gè)angular4.0項(xiàng)目

    本篇文章主要介紹了從零搭建一個(gè)angular4.0項(xiàng)目,主要用到的工具angular4.0、angular-cli、npm(v3.10.8)、node(v6.2.0),有興趣的可以了解一下
    2017-07-07
  • angular+bootstrap的雙向數(shù)據(jù)綁定實(shí)例

    angular+bootstrap的雙向數(shù)據(jù)綁定實(shí)例

    本篇文章主要介紹angular+bootstrap的雙向數(shù)據(jù)綁定的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
    2017-03-03
  • Angular.js實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)60秒按鈕的簡(jiǎn)單方法

    Angular.js實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)60秒按鈕的簡(jiǎn)單方法

    最近做項(xiàng)目的時(shí)候又遇到了驗(yàn)證碼倒計(jì)時(shí)的需求,發(fā)現(xiàn)這個(gè)功能還是挺實(shí)用的,所以就想著總結(jié)一下,下面這篇文章主要給大家介紹了關(guān)于利用Angular.js如何實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕的簡(jiǎn)單方法,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。
    2017-10-10

最新評(píng)論