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

Source Code: (back to article)

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">
      <option value="male">Male</option>
      <option value="female">Female</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>