Post
Ask Question

Searching Data In Angular

Introduction

This blog demonstrates how to use AngularJS filter to search data from a collection or table in Web page.

Getting Started

AngularJS filter is one of the filters 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
  1. {{ filter_expression | filter : expression : comparator : anyPropertyKey}}   
Example

This example uses filter in HTML or client side. It displays a list of students in a table and applies filter for searching students. This example demonstrates how to achieve full text search (searches in all column) and column wise search. See the below code snippet for more details.

Full Text Search
  1. <HTML ng-app = "myapp">    
  2.       <TITLE> AngularJS learning(Search Filter)</TITLE>    
  3.       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>    
  4.       <script>    
  5.            var myapp=angular.module("myapp",[]);    
  6.            myapp.controller("myappcont",function($scope){    
  7.            $scope.students=[    
  8.            {Name:"Kailash",Gender:"Male",Class:"1Std",Section:"A"},    
  9.            {Name:"Kalyan",Gender:"Male",Class:"1Std",Section:"A"},    
  10.            {Name:"Kalyani",Gender:"Female",Class:"1Std",Section:"A"},    
  11.            {Name:"Kamal",Gender:"Male",Class:"2Std",Section:"B"},    
  12.            {Name:"Keshav",Gender:"Male",Class:"2Std",Section:"B"},    
  13.            {Name:"KedarGouri",Gender:"Female",Class:"2Std",Section:"B"}];    
  14.            });    
  15.       </script>    
  16.       <BODY ng-controller="myappcont">    
  17.            Search : <input type="text" placeholder="Enter to search record" ng-model="searchText"/><br/><br/>    
  18.            <table border="1">    
  19.            <caption>    
  20.            </caption>    
  21.                 <tr>    
  22.                      <th>Name</input></th>    
  23.                      <th>Gender</th>    
  24.                      <th>Class</th>    
  25.                      <th>Section</th>    
  26.                 </tr>    
  27.                 <tr ng-repeat="student in students | filter:searchText">    
  28.                      <td>{{student.Name}}</td>    
  29.                      <td>{{student.Gender}}</td>    
  30.                      <td>{{student.Class}}</td>    
  31.                      <td>{{student.Section}}</td>    
  32.                 </tr>    
  33.            </table>    
  34.       </BODY>    
  35.  </HTML>    
 

Column wise search 
  1. <HTML ng-app = "myapp">    
  2.       <TITLE> AngularJS learning(Search Filter)</TITLE>    
  3.       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>    
  4.       <script>    
  5.            var myapp=angular.module("myapp",[]);    
  6.            myapp.controller("myappcont",function($scope){    
  7.            $scope.students=[    
  8.            {Name:"Kailash",Gender:"Male",Class:"1Std",Section:"A"},    
  9.            {Name:"Kalyan",Gender:"Male",Class:"1Std",Section:"A"},    
  10.            {Name:"Kalyani",Gender:"Female",Class:"1Std",Section:"A"},    
  11.            {Name:"Kamal",Gender:"Male",Class:"2Std",Section:"B"},    
  12.            {Name:"Keshav",Gender:"Male",Class:"2Std",Section:"B"},    
  13.            {Name:"KedarGouri",Gender:"Female",Class:"2Std",Section:"B"}];    
  14.            });    
  15.       </script>    
  16.       <BODY ng-controller="myappcont">    
  17.            <table border="1">    
  18.                 <tr>    
  19.                      <th>Name <input type="text" placeholder="Enter Name to search" ng-model="searchText.Name"/></input></th>    
  20.                      <th>Gender <input type="text" placeholder="Enter Gender to search" ng-model="searchText.Gender"/></th>    
  21.                      <th>Class <input type="text" placeholder="Enter Class to search" ng-model="searchText.Class"/></th>    
  22.                      <th>Section <input type="text" placeholder="Enter Section to search" ng-model="searchText.Section"/></th>    
  23.                 </tr>    
  24.                 <tr ng-repeat="student in students | filter:searchText">    
  25.                      <td>{{student.Name}}</td>    
  26.                      <td>{{student.Gender}}</td>    
  27.                      <td>{{student.Class}}</td>    
  28.                      <td>{{student.Section}}</td>    
  29.                 </tr>    
  30.            </table>    
  31.       </BODY>    
  32.  </HTML>    
 
Next Recommended Reading Pass x-www-form-urlencoded Data In Angular