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
