Wie kann man angularjs Filter verwenden

Was ist ein AngularJs Filter?

Wählen Sie eine Teilmenge von Elementen aus dem Array aus und geben sie als neues Array zurück.

Ein Filter ist in vielerlei Hinsicht einer Fabrik oder einem Service sehr ähnlich, hat aber den zusätzlichen Vorteil, dass er sich nach der Erstellung in einem globalen Umfang verhält. Wie wir bereits gesehen haben, können Sie einen Filter sowohl auf die Datenbindung in Ihrem HTML als auch direkt in Ihrer Steuerung oder Direktive aufrufen.

Verwendung von AngularJs-Filtern

In HTML-Template-Bindung

[[ filter_expression | filter : expression : comparator ]] <!-- AngularJs Print Symbols are Interpolated to '[[', ']]'-->

In JavaScript

$filter('filter')(array, expression, comparator)

AngularJs benutzerdefinierte Filter

Wie Sie wissen, können wir mit AngularJs benutzerdefinierte Filter erstellen und sie wie andere Filter verwenden. Dafür können Sie die Funktion filter(...) verwenden, um einen Filter in Ihrem Modul zu erstellen. Lassen Sie uns die Syntax sehen, wie wir einen benutzerdefinierten Filter erstellen können.

angular.module('MyModule').filter('myFilter', function() {
  return function(input, arg1, arg2) {
    var output;
    // code ...
    return output;
  }
});

Sie können diesen Filter in Ihrem Controller, Ihrer Direktive usw. oder in Ihrem Template mit der Syntax verwenden. Jetzt werden wir einen Filter (Demo) erstellen, mit dem Sie nach Geschlecht der Benutzerliste filtern können.

<!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>

Versuch es selber!