Wenn Sie die Listen von AngularJs mit der Direktive ngRepeat verwenden und ein Filter benutzen, dann möchten Sie auch wahrscheinlich wissen, wie viele Elemente nach dem Filter bleiben. Es gibt zwei Methoden, um diese Information zu bekommen: in der Vorlage und in Javascript (im Controller).
Lassen Sie uns entsprechende Beispiele betrachten.
<!DOCTYPE html>
<html>
<head>
<title>www.W3docs.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body data-ng-app="MyModule" data-ng-controller="MyController">
<select data-ng-model="filterGender">
<option value='male'>Male</option>
<option value='female'>Female</option>
</select>
<ul>
<li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li>
</ul>
<h3>{{ usersList.length | number }}/{{ users.length }}</h3>
<script>
angular.module('MyModule', [])
.controller('MyController', function($scope){
$scope.users = [
{name: 'Mike', gender: 'male', age: 23},
{name: 'Jenifer', gender: 'female', age: 32},
{name: 'Tom', gender: 'male', age: 14},
{name: 'Ellen', gender: 'female', age: 42},
{name: 'John', gender: 'male', age: 22},
{name: 'Hayk', gender: 'male', age: 18},
{name: 'Eliana', gender: 'female', age: 28}
];
})
.filter('gender', function(){
return function(users, gender){
if(!gender){
return users;
}
var arr = [];
angular.forEach(users, function(v){
if(v.gender === gender){
arr.push(v);
}
})
return arr;
}
})
</script>
</body>
</html>
Wie Sie sehen, können Sie die Filterergebnisse in einer Variable sammeln und dann dieses Datenfeld (mit der Eingabe der Länge) verwenden. Das Datenfeld "users" ist unverändert, d. h., dass es alle Benutzer enthält, und das Datenfeld "usersList" enthält die nach dem Filtern verbliebenen Benutzer.
<!DOCTYPE html>
<html>
<head>
<title>www.W3docs.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body data-ng-app="MyModule" data-ng-controller="MyController">
<select data-ng-model="filterGender" ng-change="onGenderChange()">
<option value='male'>Male</option>
<option value='female'>Female</option>
</select>
<ul>
<li data-ng-repeat="user in usersList" data-ng-bind="user.name"></li>
</ul>
<h3>{{ usersList.length | number }}/{{ users.length }}</h3>
<script>
angular.module('MyModule', [])
.controller('MyController', function($scope, $filter){
$scope.users = [
{name: 'Mike', gender: 'male', age: 23},
{name: 'Jenifer', gender: 'female', age: 32},
{name: 'Tom', gender: 'male', age: 14},
{name: 'Ellen', gender: 'female', age: 42},
{name: 'John', gender: 'male', age: 22},
{name: 'Hayk', gender: 'male', age: 18},
{name: 'Eliana', gender: 'female', age: 28}
];
$scope.usersList = angular.copy($scope.users);
$scope.onGenderChange = function(){
$scope.usersList = $filter('gender')($scope.users, $scope.filterGender)
};
})
.filter('gender', function(){
return function(users, gender){
if(!gender){
return users;
}
var arr = [];
angular.forEach(users, function(v){
if(v.gender === gender){
arr.push(v);
}
})
return arr;
}
})
</script>
</body>
</html>