Source Code:
(back to article)
Submit
Result:
Report an issue
<!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'>Masculin</option> <option value='female'>Féminin</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>