Angularjs中如何使用filterFilter函數(shù)過(guò)濾
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ì)大家有所幫助。
- AngularJS控制器controller正確的通信的方法
- 詳解AngularJS控制器的使用
- AngularJS控制器之間的數(shù)據(jù)共享及通信詳解
- AngularJS指令與控制器之間的交互功能示例
- AngularJS控制器之間的通信方式詳解
- AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法
- AngularJS實(shí)現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法示例
- AngularJS開(kāi)發(fā)教程之控制器之間的通信方法分析
- AngularJS中一般函數(shù)參數(shù)傳遞用法分析
- angularjs指令中的compile與link函數(shù)詳解
- AngularJS中控制器函數(shù)的定義與使用方法示例
相關(guā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基于Angular中ng-controller父子級(jí)嵌套的相關(guān)屬性詳解
今天小編就為大家分享一篇基于Angular中ng-controller父子級(jí)嵌套的相關(guān)屬性詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10詳解為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-12Angularjs Ng_repeat中實(shí)現(xiàn)復(fù)選框選中并顯示不同的樣式方法
今天小編就為大家分享一篇Angularjs Ng_repeat中實(shí)現(xiàn)復(fù)選框選中并顯示不同的樣式方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09angular學(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-07angular+bootstrap的雙向數(shù)據(jù)綁定實(shí)例
本篇文章主要介紹angular+bootstrap的雙向數(shù)據(jù)綁定的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03Angular.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