Chaining Filter example in AngularJS

Last Reply 4 months ago By dharmendr

Posted 4 months ago

What is Chaining Filters in angularjs

Posted 4 months ago Modified on 4 months 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