Chaining Filter example in AngularJS

Last Reply one year ago By dharmendr

Posted one year ago

What is Chaining Filters in angularjs

You are viewing reply posted by: dharmendr one year ago.
Posted one year ago Modified on one year 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