Here we will learn what is filter in angularjs, use of filter in angularjs and how to use filter function in angularjs applications to filter or search array list items with simple example.
In angulajs, filter is used get filtered subset of items from array items list based on user input filter key text.
Following is the syntax of using filter in angularjs applications to search or filter items from array list.
We will see how to use filter in angularjs to search or filter items in array list with simple example.
Following is the example of filter in angularjs to filter or search array list items in table.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs filter Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("AngularfilterApp", []);
app.controller("filterctrl", function ($scope) {
$scope.users = [{
name: "Madhav Sai",
age: 11
}, {
name: "Suresh Dasari",
age: 29
}, {
name: "Rohini Alavala",
age: 29
}, {
name: "Praveen Kumar",
age: 24
}];
});
</script>
</head>
<body ng-app="AngularfilterApp">
<div ng-controller="filterctrl">
Enter Name to Filter:<input ng-model="searchtxt" type="text" placeholder="Flter key">
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr ng-repeat="user in users | filter : searchtxt">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
</body>
</html>
If you observe above code we are filtering table items based on our search text here it will search for matching values in all columns.
Following is the result of filter function example to filter items in table.
In above example we are filtering all the column values with search text in case if we want filter table data specific to particular column means we need to write the code like as shown following
Following is the example to filter table records specific to column in angularjs application.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs filter specific records specific to column Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("AngularfilterApp", []);
app.controller("filterctrl", function ($scope) {
$scope.users = [{
name: "Madhav Sai",
age: 11
}, {
name: "Suresh Dasari",
age: 29
}, {
name: "Rohini Alavala",
age: 29
}, {
name: "Praveen Kumar",
age: 24
}];
});
</script>
</head>
<body ng-app="AngularfilterApp">
<div ng-controller="filterctrl">
Only Name to Filter:<input ng-model="searchtxt.name" type="text" placeholder="Enter Only Name"><br /><br />
Only Age to Filter:<input ng-model="searchtxt.age" type="text" placeholder="Enter Only Age"><br /><br />
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr ng-repeat="user in users | filter : searchtxt">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
</body>
</html>
If you observe above code we are filtering records specific to particular columns. We will run and see how to the output will be
Following is the result of filtering table or list records based on specific column
This is how we can implement search records specific to columns in angularjs applications.