Chaining multiple filters together

AngularJS allows you to chain multiple filters together to process data step by step. This is useful when you need to apply multiple transformations to a value before displaying it in the UI.

Filters can be applied in sequence using the | (pipe) symbol.
Each filter takes the output of the previous filter as its input.
Can be used in expressions, controllers, and directives.

---

1. Basic Syntax of Filter Chaining

To apply multiple filters, simply use the pipe (|) symbol in your AngularJS expression.

{{ expression | filter1 | filter2 | filter3 }}

• First, filter1 modifies the data.
• Second, the output of filter1 is passed to filter2.
• Third, filter3 processes the result from filter2 before final output.

---

2. Example: Chaining uppercase and limitTo Filters

We can first convert a string to uppercase and then limit the number of characters displayed.

Implementation

<p>{{ 'AngularJS Filters' | uppercase | limitTo:8 }}</p>

Explanation:

1. uppercase → Converts "AngularJS Filters" to "ANGULARJS FILTERS".
2. limitTo:8 → Trims the result to "ANGULARJ".

Output:

ANGULARJ

---

3. Example: Sorting and Limiting Data in ng-repeat

Let’s display a sorted list of names but limit the output to 3 items.

Implementation

<ul>
    <li ng-repeat="name in names | orderBy:'name' | limitTo:3">
        {{ name }}
    </li>
</ul>

app.controller('FilterController', function($scope) {
    $scope.names = ["Zara", "John", "Alice", "Bob", "Charlie"];
});

Explanation:

1. orderBy:'name' → Sorts the names in alphabetical order (["Alice", "Bob", "Charlie", "John", "Zara"]).
2. limitTo:3 → Displays only the first 3 names (["Alice", "Bob", "Charlie"]).

Output:

Alice  
Bob  
Charlie  

---

4. Example: Formatting Currency and Limiting Decimals

We can format a number as currency and then limit the decimal places.

Implementation

<p>{{ 1234.567 | currency:'$' | number:2 }}</p>

Explanation:

1. currency:'$' → Formats 1234.567 as "$1,234.57".
2. number:2 → Ensures only 2 decimal places ("$1,234.57").

Output:

$1,234.57  

---

5. Example: Custom Filter Chaining

Let’s create a custom filter that capitalizes text and then use it with the built-in limitTo filter.

Implementation

app.filter('capitalize', function() {
    return function(input) {
        if (!input) return '';
        return input.replace(/\b\w/g, function(letter) {
            return letter.toUpperCase();
        });
    };
});

Using It in HTML

<p>{{ 'hello world from angularjs' | capitalize | limitTo:15 }}</p>

Explanation:

1. capitalize → Converts "hello world from angularjs" to "Hello World From Angularjs".
2. limitTo:15 → Limits the output to "Hello World Fr".

Output:

Hello World Fr

---

6. Example: Filtering, Sorting, and Limiting Data in ng-repeat

This example filters a list of names, then sorts them, and finally limits the results.

Implementation

<input type="text" ng-model="searchText" placeholder="Search...">
<ul>
    <li ng-repeat="name in names | filter:searchText | orderBy:'name' | limitTo:5">
        {{ name }}
    </li>
</ul>

app.controller('FilterController', function($scope) {
    $scope.names = ["Zara", "John", "Alice", "Bob", "Charlie", "Emma", "Daniel"];
});

Explanation:

1. filter:searchText → Filters names based on user input.
2. orderBy:'name' → Sorts the filtered list alphabetically.
3. limitTo:5 → Displays only the first 5 results.

Feature:

• Real-time search with sorting and limiting results dynamically.

---

7. Example: Formatting Date, Uppercase, and Limiting Characters

We can format a date, then convert it to uppercase, and finally limit the output length.

Implementation

<p>{{ '2024-03-25' | date:'fullDate' | uppercase | limitTo:10 }}</p>

Explanation:

1. date:'fullDate' → Converts '2024-03-25' to "Monday, March 25, 2024".
2. uppercase → "MONDAY, MARCH 25, 2024".
3. limitTo:10 → "MONDAY, MA" (First 10 characters).

Output:

MONDAY, MA

---

8. Using Filters in Controllers

You can chain filters inside controllers using $filter.

Example: Capitalizing and Limiting Text in a Controller

app.controller('TestController', function($scope, $filter) {
    var text = "angularjs is powerful";
    $scope.result = $filter('capitalize')(text);
    $scope.result = $filter('limitTo')($scope.result, 10);
});

Displaying the Filtered Data

<p>{{ result }}</p>

Output:

Angularjs