Chaining Filter example in AngularJS

Last Reply 14 days ago By dharmendr

Posted 14 days ago

What is Chaining Filters in angularjs

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