So verwenden Sie die Funktion filterFilter zum Filtern in Angularjs

So verwenden Sie die Funktion filterFilter zum Filtern in Angularjs_AngularJS

WBOY

Freigeben： 2016-05-16 15:15:59

Original

1870 Leute haben es durchsucht

Der Filter von AngularJS, der chinesische Name „Filter“, wird verwendet, um den Wert von Variablen zu filtern oder die Ausgabe zu formatieren, um die gewünschten Ergebnisse oder Formate zu erhalten. In AngularJS gibt es eine filterFilter-Funktion zum Filtern von Sammlungen, was sehr praktisch ist.

Der Quellcode lautet ungefähr wie folgt:

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){
...
}
}
}) 
}
}

Nach dem Login kopieren

Der Controller-Teil lautet wie folgt:

angular
.module('app')
.controller('MainCtrl', ['$scope',
function($scope) {
$scope.users = $scope.users = [
{name: '', email: '', joined: 2015-1-1}
];
$scope.filter = {
fuzzy: '',
name: ''
};
...
}]);

Nach dem Login kopieren

Alle Felder durchsuchen

<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>

Nach dem Login kopieren

Nach einem Feld suchen

<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>

Nach dem Login kopieren

Wenn Sie möchten, dass das Namensfeld genau übereinstimmt:

<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>

Nach dem Login kopieren

Suchzeitraum

Der Steuerteil wird geändert in:

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;
};
}]);

Nach dem Login kopieren

Der Seitenteil ist:

<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>

Nach dem Login kopieren

Das Obige ist das vom Herausgeber geteilte Wissen darüber, wie man die FilterFilter-Funktion in Angularjs zum Filtern verwendet. Ich hoffe, dass es für alle hilfreich ist.