In AngularJS, the filter is a powerful feature used to search, filter, and manipulate data dynamically in lists, tables, and other data structures. It helps in improving the usability and readability of data in applications.
Works with arrays, objects, and strings
Can be used in ng-repeat, controllers, and services
Supports built-in and custom filters
1. Basic Syntax of filter
The filter is used in expressions like this:
{{ data | filter: searchText }}
This filters data based on the searchText entered.
2. Using filter in ng-repeat
Example: Searching a List of Names
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="FilterController">
<h2>Search Names</h2>
<input type="text" ng-model="searchText" placeholder="Search name...">
<ul>
<li ng-repeat="person in people | filter: searchText">
{{ person }}
</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.controller('FilterController', function($scope) {
$scope.people = ["John", "Mary", "Robert", "Lisa", "Michael", "Emma"];
});
</script>
</body>
</html>
Features:
- Filters names based on input text.
- Dynamically updates the list as the user types.
3. Filtering Data in a Table
Example: Searching Employees by Name or Role
<input type="text" ng-model="searchText" placeholder="Search Employee...">
<table border="1">
<tr>
<th>Name</th>
<th>Role</th>
</tr>
<tr ng-repeat="employee in employees | filter: searchText">
<td>{{ employee.name }}</td>
<td>{{ employee.role }}</td>
</tr>
</table>
app.controller('EmployeeController', function($scope) {
$scope.employees = [
{ name: "Alice", role: "Developer" },
{ name: "Bob", role: "Designer" },
{ name: "Charlie", role: "Manager" }
];
});
Features:
- Searches across multiple fields (name and role).
- Filters dynamically as the user types.
4. Filtering by Specific Properties
Sometimes, you want to filter data based on a specific property instead of searching all fields.
Example: Filtering by Role Only
<input type="text" ng-model="searchRole" placeholder="Search by Role...">
<ul>
<li ng-repeat="employee in employees | filter:{role: searchRole}">
{{ employee.name }} - {{ employee.role }}
</li>
</ul>
Feature:
- Filters only by role instead of all fields.
5. Using filter with Boolean Values
You can filter data based on a specific Boolean value.
Example: Show Only Active Users
<input type="checkbox" ng-model="showActive"> Show Active Users Only
<ul>
<li ng-repeat="user in users | filter:{active: showActive}">
{{ user.name }} - {{ user.active ? 'Active' : 'Inactive' }}
</li>
</ul>
app.controller('UserController', function($scope) {
$scope.users = [
{ name: "David", active: true },
{ name: "Sophia", active: false },
{ name: "James", active: true }
];
});
Feature:
- Displays only active users when checked.
6. Creating a Custom Filter in AngularJS
If the built-in filters don’t meet your needs, you can create a custom filter.
Example: Capitalizing the First Letter of Each Word
app.filter('capitalize', function() {
return function(input) {
if (!input) return '';
return input.replace(/\b\w/g, function(letter) {
return letter.toUpperCase();
});
};
});
<p>Original: {{ 'angular js filter example' }}</p>
<p>Capitalized: {{ 'angular js filter example' | capitalize }}</p>
Output:
Original: angular js filter example
Capitalized: Angular Js Filter Example
7. Combining Multiple Filters
You can chain multiple filters together.
Example: Filtering and Sorting Data
<input type="text" ng-model="searchText" placeholder="Search...">
<ul>
<li ng-repeat="item in items | filter: searchText | orderBy:'name'">
{{ item.name }}
</li>
</ul>
Features:
- First filters the list.
- Then sorts it alphabetically.
8. Using $filter in Controllers
If you need to filter data inside a controller, use the $filter service.
Example: Using $filter in a Controller
app.controller('FilterExampleController', function($scope, $filter) {
var items = [
{ name: "Apple", category: "Fruit" },
{ name: "Carrot", category: "Vegetable" },
{ name: "Banana", category: "Fruit" }
];
// Filter items by category 'Fruit'
$scope.filteredItems = $filter('filter')(items, { category: "Fruit" });
});
Output:
[ { name: "Apple", category: "Fruit" }, { name: "Banana", category: "Fruit" } ]
9. Filtering Objects in Arrays
To filter objects dynamically based on multiple conditions, use complex filters.
Example: Search by Name & Role
<input type="text" ng-model="searchText.name" placeholder="Search by Name">
<input type="text" ng-model="searchText.role" placeholder="Search by Role">
<ul>
<li ng-repeat="employee in employees | filter: searchText">
{{ employee.name }} - {{ employee.role }}
</li>
</ul>
Feature:
- Allows filtering by multiple fields simultaneously.
10. Limiting Filtered Results (limitTo)
You can limit the number of filtered results.
Example: Showing Only 3 Filtered Items
<ul>
<li ng-repeat="item in items | filter: searchText | limitTo:3">
{{ item }}
</li>
</ul>
Feature:
- Limits the number of displayed items.