TryIt Editor v2.0 - Demo Example of AngularJs Custom Filter

Source Code: (back to article)

Result: Report an issue

<!DOCTYPE html>
<html>
  <head>
    <title>de.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'>Männlich</option>
      <option value='female'>Weiblich</option>
    </select>

<ul>
      <li data-ng-repeat="user in users | gender:filterGender" data-ng-bind="user.name"></li>
    </ul>

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