使用AngularJS中的filterFilter函数进行过滤
2016-02-05 12:30
661 查看
AngularJS中有一个filterFilter函数用来对集合过滤,非常方便。
源代码大致如下:
controller部分如下:
■ 搜索所有任意字段
■ 搜索某个字段
如果想name字段完全匹配:
■ 搜索时间段
contrlller部分修改为:
页面部分为:
源代码大致如下:
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中的ng-controller是什么东东
- AngularJS+BootStrap的一些插件
- angularjs中的filter(过滤器)
- angularjs中的filter(过滤器)
- angularjs中的filter(过滤器)
- angularjs中的filter(过滤器)
- 关于angularJS的$watch的 一些小用法
- AngularJs中route的使用方法和配置
- Angularjs 通过WebApi 下载excel
- angular控制器之间的通信(学习笔记)
- AngularJS小示例<2>
- AngularJS小示例
- AngularJS学习笔记
- AngularJs中route的使用方法和配置
- 如何知道ng-repeat循环的dom已经渲染完成
- 使用Angularjs获取数组中的值利用一个函数的返回值来决定相应的dom是否生成
- angular学习笔记
- AngularJS向后端ASP.NET API控制器上传文件
- 如何解决Angular 2 的templateUrl和styleUrl的路径问题?
- 前端AngularJS后端ASP.NET Web API上传文件