AngularJS Filter Function Example or Search Filter Example

  Total Views : 1278
  Comments : 0
 
  Keywords : Angular search filter example, Angularjs filter items using filter function example, Angularjs filter function example using ng-repeat, AngularJS Filter array items using filter expression

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.

AngularJS Filter

In angulajs filter is used get filtered subset of items from array items list based on user input filter key text.

Syntax of using Filter in AngularJS

Following is the syntax of using filter in angularjs applications to search or filter items from array list.

 

{{filterexpression | filter : expression}}

We will see how to use filter in angularjs to search or filter items in array list with simple example.

Example of Filter in AngularJS

Following is the example of filter in angularjs to filter or search array list items in table.

 

Live Preview

<!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.

Output of AngularJS Filter Function Example

Following is the result of filter function example to filter items in table.

 

Angularjs filter example to search array list items example output

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 

AngularJS Filter Records Specific to Column Example

Following is the example to filter table records specific to column in angularjs application.

 

Live Preview

<!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

Output of AngularJS Filter Example to Filter Records with Specific Column

Following is the result of filtering table or list records based on specific column

 

Angularjs filter records based on specific columns example result or output

This is how we can implement search records specific to columns in angularjs applications.

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User