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

