AngularJS
कस्टम फ़िल्टर

सरल फिल्टर उदाहरण

फ़िल्टर उपयोगकर्ता के लिए प्रदर्शन के लिए एक अभिव्यक्ति के मूल्य को प्रारूपित करते हैं। उनका उपयोग टेम्पलेट, नियंत्रक या सेवाओं को देखने में किया जा सकता है। यह उदाहरण एक फ़िल्टर ( addZ ) बनाता है, फिर एक दृश्य में इसका उपयोग करता है। यह सब फ़िल्टर स्ट्रिंग के अंत में एक राजधानी 'जेड' जोड़ देता है।

example.js

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

example.html

दृश्य के अंदर, फ़िल्टर को निम्नलिखित सिंटैक्स के साथ लागू किया जाता है: { variable | filter} । इस मामले में, हमने जिस चर को कंट्रोलर, sample में परिभाषित किया है, वह हमारे द्वारा बनाए गए फिल्टर, addZ द्वारा फ़िल्टर किया जा रहा है।

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

अपेक्षित उत्पादन

helloZ

एक नियंत्रक, एक सेवा या एक फिल्टर में एक फिल्टर का उपयोग करें

आपको $filter इंजेक्ट करना होगा:

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

मापदंडों के साथ एक फ़िल्टर बनाएं

डिफ़ॉल्ट रूप से, एक फ़िल्टर में एक एकल पैरामीटर होता है: जिस चर पर इसे लागू किया जाता है। लेकिन आप फ़ंक्शन के लिए अधिक पैरामीटर पास कर सकते हैं:

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

अब, आप percentage फ़िल्टर करने के लिए एक सटीक दे सकते हैं:

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

... लेकिन अन्य पैरामीटर वैकल्पिक हैं, आप अभी भी डिफ़ॉल्ट फ़िल्टर का उपयोग कर सकते हैं:

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