Search Filter in AngularJS


Introduction

This article demonstrates how to use of AngularJS filter to search data from a collection or table in 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>  
Code Snippet: Column wise 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">  
           <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
Kailash Chandra Behera


1 comment:

  1. You can modify the 바카라사이트 bet degree to your liking, depending on whether you're a high roller or low roller. The Bet Button is the place you place your bets and the Deal Button will get your cards. Almost each variation of video poker provides you a chance to discard cards and draw new ones. Make your habit to search for the biggest bonuses obtainable and search for promotions that can offer you free play on the video games that you actually like.

    ReplyDelete