AngularJS Filters

📌 AngularJS Filters क्या हैं?

Filters ऐसे tools होते हैं जिनका इस्तेमाल AngularJS में data को format करने, sort करने, या filter करने के लिए किया जाता है — बिना data को बदले हुए।

आसान भाषा में: Filter वो “चश्मा” है जिससे आप data को ज़्यादा साफ़, सुंदर या उपयोगी तरीके से दिखा सकते हैं।

---

✍️ Syntax:

{{ expression | filterName }}

Pipe symbol | का मतलब होता है “apply this filter”

---

🔍 कुछ Common Built-in Filters:

Filter	काम
uppercase	सभी अक्षरों को CAPITAL में बदलता है
lowercase	सभी अक्षरों को small में बदलता है
currency	number को currency format में दिखाता है
number	number को decimal format में दिखाता है
date	date को readable format में दिखाता है
filter	list को keyword के आधार पर filter करता है
orderBy	list को ascending/descending क्रम में sort करता है

---

✅ Example 1: uppercase, lowercase

<div ng-app="" ng-init="name='Amit Kumar'">
  <p>Normal: {{ name }}</p>
  <p>Uppercase: {{ name | uppercase }}</p>
  <p>Lowercase: {{ name | lowercase }}</p>
</div>

Output:

• Normal: Amit Kumar
• Uppercase: AMIT KUMAR
• Lowercase: amit kumar

---

✅ Example 2: currency

<div ng-app="" ng-init="price=1500">
  <p>Price: {{ price | currency }}</p>
</div>

Output: ₹1,500.00 (भारतीय ब्राउज़र में)

---

✅ Example 3: date

<div ng-app="" ng-init="today=Date.now()">
  <p>Current Date: {{ today | date:'fullDate' }}</p>
</div>

Output: Tuesday, June 27, 2025 (format आपके ब्राउज़र पर depend करता है)

---

✅ Example 4: filter (Search Feature)

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="searchName" placeholder="Search name...">
  <ul>
    <li ng-repeat="person in people | filter:searchName">{{ person }}</li>
  </ul>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.people = ["Amit", "Anu", "Vikas", "Priya", "Ravi"];
  });
</script>

Output: जैसे ही आप “A” टाइप करेंगे, सिर्फ “Amit” और “Anu” दिखेंगे।

---

✅ Example 5: orderBy

<div ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="mark in marks | orderBy:'score'">
      {{ mark.name }} - {{ mark.score }}
    </li>
  </ul>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.marks = [
      { name: 'Ravi', score: 82 },
      { name: 'Amit', score: 95 },
      { name: 'Priya', score: 75 }
    ];
  });
</script>

Output: Marks ascending order में दिखेंगे (75 → 82 → 95)

---

🔧 Multiple Filters एक साथ

{{ name | lowercase | limitTo:5 }}

पहले name lowercase होगा, फिर सिर्फ पहले 5 letters दिखेंगे

---

🧠 अभ्यास प्रश्न (Exercise)

1. AngularJS में filters का उपयोग किसलिए किया जाता है?
2. Pipe (|) का क्या मतलब है?
3. ng-repeat में filter और orderBy का क्या काम है?

---

✅ आपने क्या सीखा?

• AngularJS Filters क्या हैं
• Common built-in filters: uppercase, currency, date, filter, orderBy
• Filters को expression और lists में कैसे इस्तेमाल करें
• Multiple filters एक साथ लगाना

---

🎯 अब आप data को केवल दिखा नहीं सकते, बल्कि उसे format और filter भी कर सकते हैं — जैसे एक प्रोफेशनल!