Rumah >hujung hadapan web >tutorial js >Cara menggunakan fungsi penapisFilter untuk menapis dalam Angularjs_AngularJS
Penapis AngularJS, nama Cina "penapis" digunakan untuk menapis nilai pembolehubah, atau memformatkan output untuk mendapatkan hasil atau format yang diingini. Terdapat fungsi penapisFilter dalam AngularJS untuk menapis koleksi, yang sangat mudah.
Kod sumber adalah kira-kira seperti berikut:
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){ ... } } }) } }
Bahagian pengawal adalah seperti berikut:
angular .module('app') .controller('MainCtrl', ['$scope', function($scope) { $scope.users = $scope.users = [ {name: '', email: '', joined: 2015-1-1} ]; $scope.filter = { fuzzy: '', name: '' }; ... }]);
Cari semua mana-mana medan
<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>
Cari medan
<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>
Jika anda mahu medan nama sepadan dengan tepat:
<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>
Tempoh masa carian
Bahagian kawalan diubah suai kepada:
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; }; }]);
Bahagian halaman ialah:
<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>
Di atas adalah pengetahuan yang dikongsi oleh editor tentang cara menggunakan fungsi filterFilter dalam Angularjs untuk menapis saya harap ia akan membantu semua orang.