Chaining Filter example in AngularJS

Last Reply one month ago By dharmendr

Posted one month ago

What is Chaining Filters in angularjs

Posted one month ago Modified on one month ago

Hi rani,

The chaining filters are used to perform the multiple filter operations within the single result.

This chaining filters operation will be chained using the pipe (|) symbol.

AngularJs Filters are

  1. Lowercase
  2. Uppercase
  3. OrderBy
  4. Currency
  5. Filter

Example

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller("MyController", function ($scope) {
            $scope.Customers = [
                   { CustomerId: 1, Name: "John Hammond", Country: "United States" },
                   { CustomerId: 2, Name: "Mudassar Khan", Country: "India" },
                   { CustomerId: 3, Name: "Suzanne Mathews", Country: "France" },
                   { CustomerId: 4, Name: "Robert Schidner", Country: "Russia"}];
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <input ng-model="name.Name" type="text" placeholder="Enter Name">
        <hr />
        <table border="1">
            <tr>
                <td>Id</td>
                <td>Name</td>
                <td>Country</td>
            </tr>
            <tr ng-repeat="customer in Customers | filter:name | orderBy: 'Country'">
                <td>{{customer.CustomerId}}</td>
                <td>{{customer.Name}}</td>
                <td>{{customer.Country | uppercase }}</td>
            </tr>
        </table>
    </div>
</body>
</html>

Demo