AngularJS
Anpassade filter

Enkelt filterexempel

Filter formaterar värdet på ett uttryck för visning för användaren. De kan användas i visningsmallar, styrenheter eller tjänster. Detta exempel skapar ett filter ( addZ ) och använder det sedan i en vy. Allt detta filter gör är att lägga till ett stort "Z" i slutet av strängen.

example.js

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

example.html

Inuti vyn tillämpas filtret med följande syntax: { variable | filter} . I det här fallet filtreras den variabel vi definierade i regulatorn, sample , av det filter vi skapade, addZ .

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

Förväntad utgång

helloZ

Använd ett filter i en styrenhet, en tjänst eller ett filter

Du måste injicera $filter :

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

Skapa ett filter med parametrar

Som standard har ett filter en enda parameter: variabeln som den används på. Men du kan skicka mer parameter till funktionen:

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) + ' %';
    };
  });

Nu kan du ge en precision till percentage :

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

... men andra parametrar är valfria, du kan fortfarande använda standardfiltret:

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