Course Progress 27%

AngularJS Filters

← AngularJS Scope AngularJS Services →

AngularJS Filters का उपयोग data को display करने से पहले format, transform या modify करने के लिए किया जाता है। Filters Model के actual data को change नहीं करते, बल्कि सिर्फ View में दिखने वाले output को बदलते हैं।

Filters का सबसे common use data formatting के लिए होता है, जैसे text को uppercase करना, currency format करना या list को filter करना।

Filter क्या है

Filter एक function होता है जो input data लेता है और processed output return करता है। AngularJS में filters mainly expressions और directives के साथ use किए जाते हैं।

Filters pipe symbol | के जरिए apply किए जाते हैं।

{{ expression | filterName }}

Built-in AngularJS Filters

AngularJS कई built-in filters provide करता है जो daily use में आते हैं।

Common filters:

  • uppercase
  • lowercase
  • currency
  • number
  • date
  • filter
  • orderBy
  • limitTo

uppercase और lowercase Filter

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

Code Explanation

  • name variable में text store है
  • uppercase filter text को capital letters में बदल देता है
  • lowercase filter text को small letters में बदल देता है
  • Original value change नहीं होती, सिर्फ display format बदलता है

currency Filter

currency filter number को currency format में convert करता है।

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

Code Explanation

  • price एक number value है
  • currency filter उसे default currency symbol के साथ show करता है
  • Value internally same रहती है

Custom symbol के साथ:

{{ price | currency:'₹' }}

number Filter

number filter decimals को control करने के लिए use होता है।

<div ng-app ng-init="value=1234.5678">
  <p>{{ value | number:2 }}</p>
</div>

Code Explanation

  • number:2 decimal के बाद 2 digits show करता है
  • Rounding automatically apply होती है

date Filter

date filter date object को readable format में बदलता है।

<div ng-app ng-init="today = (new Date())">
  <p>{{ today | date:'dd-MM-yyyy' }}</p>
</div>

Code Explanation

  • today में current date store है
  • date filter specified format में output दिखाता है

filter Filter (Search / Filter Data)

filter filter collection में search करने के लिए use होता है।

<div ng-app ng-init="names=['Amit','Rahul','Neha','Priya']">
  <input type="text" ng-model="searchText">
  <ul>
    <li ng-repeat="name in names | filter:searchText">
      {{name}}
    </li>
  </ul>
</div>

Code Explanation

  • names array में multiple values हैं
  • searchText user input से bind है
  • filter:searchText matching items को show करता है
  • List real-time update होती है

orderBy Filter

orderBy filter data को sort करने के लिए use किया जाता है।

<div ng-app ng-init="numbers=[5,2,9,1,7]">
  <ul>
    <li ng-repeat="n in numbers | orderBy">
      {{n}}
    </li>
  </ul>
</div>

Code Explanation

  • numbers array unordered है
  • orderBy default ascending order में sort करता है

Descending order:

<li ng-repeat="n in numbers | orderBy:'':true">

limitTo Filter

limitTo filter data की length को limit करने के लिए use होता है।

<div ng-app ng-init="items=['One','Two','Three','Four']">
  <ul>
    <li ng-repeat="item in items | limitTo:2">
      {{item}}
    </li>
  </ul>
</div>

Code Explanation

  • limitTo:2 सिर्फ पहले दो items show करता है

Filters in Controller

Filters को controller में भी use किया जा सकता है।

app.controller("myCtrl", function($scope, $filter) {
  $scope.name = $filter('uppercase')('angularjs');
});

Code Explanation

  • $filter service filter को JavaScript में use करने देती है
  • uppercase filter string को transform करता है

Custom Filter बनाना

AngularJS में आप अपने custom filters भी बना सकते हैं।

app.filter("reverse", function() {
  return function(text) {
    return text.split('').reverse().join('');
  };
});

HTML में:

<p>{{ 'Angular' | reverse }}</p>

Code Explanation

  • reverse custom filter बनाया गया
  • Input string को reverse किया गया
  • Output View में display होता है

Filter Best Practices

  • Filters को lightweight रखें
  • Heavy logic filters में न रखें
  • Performance के लिए limited use करें
  • Repeated filters को controller या service में handle करें

Common Filter Mistakes

  • Filters से data modify करने की कोशिश करना
  • Large lists पर heavy filters apply करना
  • Custom filter में error handling न करना

Summary

इस chapter में आपने सीखा:

  • AngularJS Filters क्या होते हैं
  • Built-in filters का उपयोग
  • filter, orderBy, limitTo filters
  • Controller में filters का use
  • Custom filter कैसे बनाते हैं
  • Filters के best practices और common mistakes
← AngularJS Scope AngularJS Services →
  • Home