Angularjs中如何使用filterFilter函數(shù)過濾
AngularJS的filter,中文名“過濾器”是用來過濾變量的值,或者格式化輸出,得到自己所期望的結(jié)果或格式的東東。AngularJS中有一個(gè)filterFilter函數(shù)用來對集合過濾,非常方便。
源代碼大致如下:
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;
};
}]);
頁面部分為:
<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ān)知識,希望對大家有所幫助。
- AngularJS控制器controller正確的通信的方法
- 詳解AngularJS控制器的使用
- AngularJS控制器之間的數(shù)據(jù)共享及通信詳解
- AngularJS指令與控制器之間的交互功能示例
- AngularJS控制器之間的通信方式詳解
- AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法
- AngularJS實(shí)現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法示例
- AngularJS開發(fā)教程之控制器之間的通信方法分析
- AngularJS中一般函數(shù)參數(shù)傳遞用法分析
- angularjs指令中的compile與link函數(shù)詳解
- AngularJS中控制器函數(shù)的定義與使用方法示例
相關(guān)文章
簡單談?wù)剅equire模塊化jquery和angular的問題
下面小編就為大家?guī)硪黄唵握務(wù)剅equire模塊化jquery和angular的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
基于Angular中ng-controller父子級嵌套的相關(guān)屬性詳解
今天小編就為大家分享一篇基于Angular中ng-controller父子級嵌套的相關(guān)屬性詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
詳解為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法
所謂攔截器就是在目標(biāo)達(dá)到目的地之前對其進(jìn)行處理以便處理結(jié)果更加符合我們的預(yù)期。Angular的$http攔截器是通過$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ù)選框選中并顯示不同的樣式方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
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í)例,具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
Angular.js實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)60秒按鈕的簡單方法
最近做項(xiàng)目的時(shí)候又遇到了驗(yàn)證碼倒計(jì)時(shí)的需求,發(fā)現(xiàn)這個(gè)功能還是挺實(shí)用的,所以就想著總結(jié)一下,下面這篇文章主要給大家介紹了關(guān)于利用Angular.js如何實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕的簡單方法,需要的朋友可以參考借鑒,下面來一起看看吧。2017-10-10

