时间:2021-07-01 10:21:17 帮助过:7人阅读
AngularJS的filter,中文名“过滤器”是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东。AngularJS中有一个filterFilter函数用来对集合过滤,非常方便。
源代码大致如下:
- 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函数过滤的相关知识,希望对大家有所帮助。