AngularJS
फिल्टर

आपका पहला फ़िल्टर

फिल्टर एक विशेष प्रकार के फ़ंक्शन हैं जो संशोधित कर सकते हैं कि पृष्ठ पर कुछ कैसे प्रिंट किया गया है, या किसी सरणी को फ़िल्टर करने के लिए या ng-repeat कार्रवाई के लिए उपयोग किया जा सकता है। आप app.filter() विधि को कॉल करके एक फ़िल्टर बना सकते हैं, इसे एक नाम और एक फ़ंक्शन पास कर सकते हैं। सिंटैक्स पर विवरण के लिए नीचे दिए गए उदाहरण देखें।

उदाहरण के लिए, आइए एक फ़िल्टर बनाएं जो एक स्ट्रिंग को सभी अपरकेस (मूल रूप से .toUpperCase() जावास्क्रिप्ट फ़ंक्शन का एक आवरण) में बदल देगा:

var app = angular.module("MyApp", []);

// just like making a controller, you must give the
// filter a unique name, in this case "toUppercase"
app.filter('toUppercase', function(){
    // all the filter does is return a function,
    // which acts as the "filtering" function
    return function(rawString){
        // The filter function takes in the value,
        // which we modify in some way, then return
        // back.
        return rawString.toUpperCase();
    };
}); 

चलो ऊपर जो हो रहा है, उस पर करीब से नज़र डालते हैं।

सबसे पहले, हम "टॉपरसेस" नामक एक फिल्टर बना रहे हैं, जो एक नियंत्रक की तरह है; app.filter(...) । फिर, वह फ़िल्टर फ़ंक्शन वास्तविक फ़िल्टर फ़ंक्शन लौटाता है। वह फ़ंक्शन एक एकल ऑब्जेक्ट लेता है, जो फ़िल्टर किया जाने वाला ऑब्जेक्ट है, और ऑब्जेक्ट के फ़िल्टर किए गए संस्करण को वापस करना चाहिए।

नोट: इस स्थिति में, हम मान रहे हैं कि फ़िल्टर में पास की जा रही वस्तु एक स्ट्रिंग है, और इसलिए हमेशा केवल स्ट्रिंग्स पर फ़िल्टर का उपयोग करना जानते हैं। कहा जा रहा है कि फ़िल्टर में एक और सुधार किया जा सकता है जो वस्तु के माध्यम से लूप करता है (यदि यह एक सरणी है) और फिर प्रत्येक तत्व बनाता है जो एक स्ट्रिंग अपरकेस है।

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

जावास्क्रिप्ट

बस अपने नियंत्रक को कोणीय $filter ऑब्जेक्ट इंजेक्ट करें, फिर इसका उपयोग करके फ़िल्टर फ़ंक्शन को उसके नाम का उपयोग करें।

app.controller("MyController", function($scope, $filter){
    this.rawString = "Foo";
    this.capsString = $filter("toUppercase")(this.rawString);
});

एचटीएमएल

एक कोणीय निर्देश के लिए, वास्तविक स्ट्रिंग के बाद निर्देश में फ़िल्टर नाम के बाद पाइप ( | ) प्रतीक का उपयोग करें। उदाहरण के लिए, rawString लें कि हमारे पास MyController नामक एक नियंत्रक है जिसमें एक स्ट्रिंग है जिसे rawString कहा जाता है MyController कि इसका एक तत्व है।

<div ng-controller="MyController as ctrl">
    <span>Capital rawString: {{ ctrl.rawString | toUppercase }}</span>
</div>

संपादक का ध्यान दें: कोणीय में कई फिल्टर हैं, जिनमें "अपरकेस" शामिल है, और "टूपरसेज़" फ़िल्टर का उद्देश्य केवल एक डेमो के रूप में है जो आसानी से दिखाता है कि फ़िल्टर कैसे काम करता है, लेकिन आपको अपना स्वयं का अपरकेस फ़ंक्शन बनाने की आवश्यकता नहीं है।

मूल्यों को हटाने के लिए कस्टम फ़िल्टर

एक फिल्टर के लिए एक विशिष्ट उपयोग मामला एक सरणी से मानों को हटाने के लिए है। इस उदाहरण में हम एक ऐरे में पास होते हैं और इसमें पाए गए किसी भी नल को हटाते हैं, एरे को वापस लौटाते हैं।

function removeNulls() {
    return function(list) {
        for (var i = list.length - 1; i >= 0; i--) {
            if (typeof list[i] === 'undefined' ||
                    list[i] === null) {
                list.splice(i, 1);
            }
        }
        return list;
    };
}

इसका उपयोग HTML में किया जाएगा

{{listOfItems | removeNulls}}

या जैसे एक नियंत्रक में

listOfItems = removeNullsFilter(listOfItems);

कस्टम फ़िल्टर प्रारूप मानों के लिए

फिल्टर के लिए एक और उपयोग मामला एकल मूल्य को प्रारूपित करना है। इस उदाहरण में, हम एक मान में पास होते हैं और हमें एक उचित सही बूलियन मान दिया जाता है।

function convertToBooleanValue() {
    return function(input) {
        if (typeof input !== 'undefined' &&
                input !== null &&
                (input === true || input === 1 || input === '1' || input
                        .toString().toLowerCase() === 'true')) {
            return true;
        }
        return false;
    };
}

HTML में कौन सा इस तरह इस्तेमाल किया जाएगा:

{{isAvailable | convertToBooleanValue}}

या नियंत्रक में जैसे:

var available = convertToBooleanValueFilter(isAvailable);

बाल सरणी में फ़िल्टर करना

यह उदाहरण यह प्रदर्शित करने के लिए किया गया था कि आप कस्टम फ़िल्टर की आवश्यकता के बिना चाइल्ड ऐरे में गहरा फ़िल्टर कैसे कर सकते हैं।

नियंत्रक:

(function() {
  "use strict";
  angular
    .module('app', [])
    .controller('mainCtrl', mainCtrl);

  function mainCtrl() {
    var vm = this;
  
    vm.classifications = ["Saloons", "Sedans", "Commercial vehicle", "Sport car"];
    vm.cars = [  
       {  
          "name":"car1",
          "classifications":[  
             {  
                "name":"Saloons"
             },
             {  
                "name":"Sedans"
             }
          ]
       },
       {  
          "name":"car2",
          "classifications":[  
             {  
                "name":"Saloons"
             },
             {  
                "name":"Commercial vehicle"
             }
          ]
       },
       {  
          "name":"car3",
          "classifications":[  
             {  
                "name":"Sport car"
             },
             {  
                "name":"Sedans"
             }
          ]
       }
    ];
  }
})();

राय:

<body ng-app="app" ng-controller="mainCtrl as main">
  Filter car by classification:
  <select ng-model="classificationName"
          ng-options="classification for classification in main.classifications"></select>
  <br>
  <ul>
    <li ng-repeat="car in main.cars |
                   filter: { classifications: { name: classificationName } } track by $index"
                  ng-bind-template="{{car.name}} - {{car.classifications | json}}">
    </li>
  </ul>
</body>

पूर्ण डेमो की जाँच करें।

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

$filter इंजेक्ट करके, आपके कोणीय मॉड्यूल में किसी भी परिभाषित फ़िल्टर का उपयोग नियंत्रकों, सेवाओं, निर्देशों या अन्य फ़िल्टर में किया जा सकता है।

angular.module("app")
  .service("users", usersService)
  .controller("UsersController", UsersController);

function usersService () {
  this.getAll = function () {
    return [{
      id: 1,
      username: "john"
    }, {
      id: 2,
      username: "will"
    }, {
      id: 3,
      username: "jack"
    }];
  };
}

function UsersController ($filter, users) {
  var orderByFilter = $filter("orderBy");

  this.users = orderByFilter(users.getAll(), "username");
  // Now the users are ordered by their usernames: jack, john, will

  this.users = orderByFilter(users.getAll(), "username", true);
  // Now the users are ordered by their usernames, in reverse order: will, john, jack
}

एनजी-रिपीट के बाहर से फ़िल्टर की गई सूची तक पहुँचना

कभी-कभी आप ng-repeat बाहर से अपने फ़िल्टर के परिणाम तक पहुंचना चाहेंगे, शायद उन आइटमों की संख्या को इंगित करने के लिए जो फ़िल्टर किए गए हैं। आप ng-repeat पर as [variablename] सिंटैक्स के as [variablename] इसका उपयोग कर सकते हैं।

<ul>
  <li ng-repeat="item in vm.listItems | filter:vm.myFilter as filtered">
    {{item.name}}
  </li>
</ul>
<span>Showing {{filtered.length}} of {{vm.listItems.length}}</span>