How to Show Angularjs Filtered Count
There are two ways to count items in a filtered AngularJs list used in ngRepeat: to get filter count either in template or in controller. See how to do it.
If you use AngularJs lists with ngRepeat directive and set a filter on it, you probably want to know how many items there are after filtering. You can do this in two ways, in template and with javascript (controller).
How to get filter count in template
Let's consider examples
Example
AngularJs filtered count example in template
<!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>As you see, you can collect the filter results into another variable, then use that array (getting its length). The "users" array is unchanged, it means that "users" array contains all users, and "usersList" array contains the users remained after filtering.
Now let's try to solve it inside controller.
How to get filter count in controller
AngularJs filtered count inside controller
<!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>