Angular

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>    
 
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs