Maison >interface Web >js tutoriel >Comment utiliser la fonction filterFilter pour filtrer dans Angularjs_AngularJS
Le filtre d'AngularJS, le nom chinois « filtre » est utilisé pour filtrer la valeur des variables, ou formater la sortie pour obtenir les résultats ou formats souhaités. Il existe une fonction filterFilter dans AngularJS pour filtrer les collections, ce qui est très pratique.
Le code source est à peu près le suivant :
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){ ... } } }) } }
La partie contrôleur est la suivante :
angular .module('app') .controller('MainCtrl', ['$scope', function($scope) { $scope.users = $scope.users = [ {name: '', email: '', joined: 2015-1-1} ]; $scope.filter = { fuzzy: '', name: '' }; ... }]);
Rechercher dans tous les champs
<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>
Rechercher un champ
<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>
Si vous souhaitez que le champ du nom corresponde exactement :
<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>
Période de recherche
La partie contrôleur est modifiée en :
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; }; }]);
La partie page est :
<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>
Ce qui précède représente les connaissances partagées par l'éditeur sur la façon d'utiliser la fonction filterFilter dans Angularjs pour filtrer. J'espère que cela sera utile à tout le monde.