Course Progress 84%

AngularJS Custom Filters

← AngularJS Promises – $q AngularJS Security →

AngularJS में Filters का उपयोग data को display करने से पहले format करने के लिए किया जाता है। AngularJS कई built-in filters देता है (जैसे uppercase, lowercase, currency), लेकिन real applications में अक्सर हमें अपनी जरूरत के हिसाब से Custom Filters बनाने पड़ते हैं।

इस chapter में आप सीखेंगे:

  • Custom Filter क्या होता है
  • Custom Filter क्यों और कब use किया जाता है
  • Custom Filter कैसे create करें
  • Parameters के साथ filter कैसे बनाएं
  • HTML और Controller दोनों में custom filter का use

Custom Filter क्या है

Custom Filter एक user-defined function होता है जो input data को process करके modified output return करता है।
यह filter view layer (HTML) में data को readable और meaningful बनाने के लिए use होता है।

Example use cases:

  • Text को custom format में show करना
  • Numbers को specific logic से change करना
  • Strings को mask करना (email, phone)

Custom Filter क्यों जरूरी है

  • Reusable logic मिलता है
  • HTML clean रहता है
  • Data formatting centralized होती है
  • Built-in filters की limitation खत्म होती है

Custom Filter कैसे Create करें

AngularJS में filter बनाने के लिए .filter() method का use किया जाता है।

Basic Custom Filter Example

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

app.filter("reverseText", function() {
  return function(input) {
    return input.split("").reverse().join("");
  };
});

Code Explanation

  • app.filter() से नया filter register किया गया
  • reverseText filter का नाम है
  • Filter function एक input लेता है
  • String को reverse करके return करता है

Custom Filter का HTML में Use

<div ng-app="myApp" ng-controller="myCtrl">
  <p>{{ message | reverseText }}</p>
</div>

app.controller("myCtrl", function($scope) {
  $scope.message = "AngularJS";
});

Explanation

  • | pipe operator filter apply करता है
  • message value custom filter से pass होती है
  • Output: SJralugnA

Custom Filter with Parameters

Filters parameters भी accept कर सकते हैं।

Example: Limit Characters Filter

app.filter("limitChars", function() {
  return function(input, limit) {
    if (!input) return "";
    return input.substring(0, limit);
  };
});

Code Explanation

  • limit parameter filter को extra control देता है
  • substring() string को limit तक काट देता है

HTML Usage

<p>{{ text | limitChars:5 }}</p>

$scope.text = "AngularJS Filters";

Output Explanation

  • First 5 characters display होंगे
  • Output: Angul

Custom Filter with Condition

app.filter("statusText", function() {
  return function(input) {
    return input ? "Active" : "Inactive";
  };
});

Explanation

  • Boolean value को readable text में convert करता है
  • UI user-friendly बनती है

Filter in Controller using $filter Service

Custom filters सिर्फ HTML में ही नहीं, controller में भी use किए जा सकते हैं।

app.controller("ctrl", function($scope, $filter) {
  var result = $filter("reverseText")("Hello");
  $scope.output = result;
});

Code Explanation

  • $filter AngularJS की built-in service है
  • Filter name string के रूप में pass किया जाता है
  • Controller logic में filter reuse होता है

Chaining Custom Filters

{{ message | uppercase | reverseText }}

Explanation

  • Multiple filters chain में apply होते हैं
  • Execution left to right होती है

Common Mistakes

  • Filter में heavy logic लिखना
  • API call filter के अंदर करना
  • Filter को business logic के लिए use करना
  • undefined input handle न करना

Best Practices

  • Filters lightweight रखें
  • सिर्फ display-related logic रखें
  • Reusable और generic filters बनाएं
  • Complex logic services में रखें

Summary

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

  • AngularJS Custom Filters क्या होते हैं
  • Filter कैसे create और register करें
  • Parameters के साथ filter use करना
  • HTML और Controller दोनों में filter apply करना
  • Best practices और common mistakes
← AngularJS Promises – $q AngularJS Security →
  • Home