Array Filter example in AngularJS

Last Reply 7 months ago By dharmendr

Posted 7 months ago

What are the types of AngularJs Array Filters and how to use it

Posted 7 months ago

Hi rani,

The array filters are used to filter an array collection with the help of keys. The keys can be OrderBy, Uppercase, Lowercase, Filter etc.

In this below example, I am going to filter a Customers array collection by using the filter keys (Name and Uppercase).

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border-color: #ccc;
        }
    </style>
    <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 = [
                { Id: 1, Name: "John Hammond", Country: "United States" },
                { Id: 2, Name: "Mudassar Khan", Country: "India" },
                { Id: 3, Name: "Suzanne Mathews", Country: "France" },
                { Id: 4, Name: "Robert Schidner", Country: "Russia" }
            ];
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <h3>Filter Only Name Column</h3>
        Enter Name : <input ng-model="search.Name" type="text" placeholder="Enter name">
        <hr />
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody ng-repeat="customer in Customers | filter:search">
                <tr>
                    <td>{{customer.Id }}</td>
                    <td>{{customer.Name }}</td>
                    <td>{{customer.Country | uppercase }}</td>
                </tr>
            </tbody>
        </table>
        <hr />
        <h3>Filter All Column</h3>
        Enter Name : <input ng-model="search1" type="text" placeholder="Enter name">
        <hr />
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody ng-repeat="customer in Customers | filter:search1">
                <tr>
                    <td>{{customer.Id }}</td>
                    <td>{{customer.Name }}</td>
                    <td>{{customer.Country | uppercase }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Demo