AngularJS
Niestandardowe filtry

Prosty przykład filtra

Filtry formatują wartość wyrażenia do wyświetlenia użytkownikowi. Można ich używać w szablonach widoku, kontrolerach lub usługach. Ten przykład tworzy filtr ( addZ ), a następnie używa go w widoku. Filtr ten dodaje tylko „Z” na końcu łańcucha.

przyklad.js

angular.module('main', [])
    .filter('addZ', function() {
            return function(value) {
                return value + "Z";
            }
     })
    .controller('MyController', ['$scope', function($scope) {
        $scope.sample = "hello";
    }])

przyklad.html

W widoku filtr jest stosowany z następującą składnią: { variable | filter} . W tym przypadku zmienna, którą zdefiniowaliśmy w kontrolerze, sample , jest filtrowana przez utworzony przez nas filtr addZ .

<div ng-controller="MyController">
   <span>{{sample | addZ}}</span>
</div>

Oczekiwany wynik

helloZ

Użyj filtra w kontrolerze, usłudze lub filtrze

Będziesz musiał wstrzyknąć $filter :

angular
  .module('filters', [])
  .filter('percentage', function($filter) {
    return function (input) {
      return $filter('number')(input * 100) + ' %';
    };
  });

Utwórz filtr z parametrami

Domyślnie filtr ma jeden parametr: zmienną, na której jest stosowany. Ale możesz przekazać więcej parametrów do funkcji:

angular
  .module('app', [])
  .controller('MyController', function($scope) {
    $scope.example = 0.098152;
  })
  .filter('percentage', function($filter) {
    return function (input, decimals) {
      return $filter('number')(input * 100, decimals) + ' %';
    };
  });

Teraz możesz nadać dokładność filtrowi percentage :

<span ng-controller="MyController">{{ example | percentage: 2 }}</span>
=> "9.81 %"

... ale inne parametry są opcjonalne, nadal możesz użyć domyślnego filtra:

<span ng-controller="MyController">{{ example | percentage }}</span>
=> "9.8152 %"