Introduction
This article demonstrates how to use AngularJS filter to search data from a collection or table on a Web page.
Getting Started
AngularJS filter is one of the filter from AngularJS standard filters. It enables searching data from a table or collection of records. it searches and fetches matched records from a collection. This filter can be used both in client side (HTML) and server side (in Javascript with controller).
Syntax:
{{ filter_expression | filter : expression : comparator : anyPropertyKey}}
Example:
This example uses filter in HTML or client side. It displays list of students in a table and applies filter for searching students. This example demonstrates to achieve full text search (searches in all column) and column wise search. See the below code snippet for more details. Code Snippet: Full Text Search <HTML ng-app = "myapp">
<TITLE> AngularJS learning(Search Filter)</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myappcont",function($scope){
$scope.students=[
{Name:"Kailash",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Kalyan",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Kalyani",Gender:"Female",Class:"1Std",Section:"A"},
{Name:"Kamal",Gender:"Male",Class:"2Std",Section:"B"},
{Name:"Keshav",Gender:"Male",Class:"2Std",Section:"B"},
{Name:"KedarGouri",Gender:"Female",Class:"2Std",Section:"B"}];
});
</script>
<BODY ng-controller="myappcont">
Search : <input type="text" placeholder="Enter to search record" ng-model="searchText"/><br/><br/>
<table border="1">
<caption>
</caption>
<tr>
<th>Name</input></th>
<th>Gender</th>
<th>Class</th>
<th>Section</th>
</tr>
<tr ng-repeat="student in students | filter:searchText">
<td>{{student.Name}}</td>
<td>{{student.Gender}}</td>
<td>{{student.Class}}</td>
<td>{{student.Section}}</td>
</tr>
</table>
</BODY>
</HTML>
<HTML ng-app = "myapp">
<TITLE> AngularJS learning(Search Filter)</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myappcont",function($scope){
$scope.students=[
{Name:"Kailash",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Kalyan",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Kalyani",Gender:"Female",Class:"1Std",Section:"A"},
{Name:"Kamal",Gender:"Male",Class:"2Std",Section:"B"},
{Name:"Keshav",Gender:"Male",Class:"2Std",Section:"B"},
{Name:"KedarGouri",Gender:"Female",Class:"2Std",Section:"B"}];
});
</script>
<BODY ng-controller="myappcont">
<table border="1">
<tr>
<th>Name <input type="text" placeholder="Enter Name to search" ng-model="searchText.Name"/></input></th>
<th>Gender <input type="text" placeholder="Enter Gender to search" ng-model="searchText.Gender"/></th>
<th>Class <input type="text" placeholder="Enter Class to search" ng-model="searchText.Class"/></th>
<th>Section <input type="text" placeholder="Enter Section to search" ng-model="searchText.Section"/></th>
</tr>
<tr ng-repeat="student in students | filter:searchText">
<td>{{student.Name}}</td>
<td>{{student.Gender}}</td>
<td>{{student.Class}}</td>
<td>{{student.Section}}</td>
</tr>
</table>
</BODY>
</HTML>
Summary
Here we demonstrated how to get full text search and column wise search using AngularJS filter. Hope this article may helpful to you.
Thanks
Tags
AngularJS