Angular js Basic Search and Filter Data with Example

April 26, 2015

Blogger Image

Prashobh P S

Senior Software Engineer

Angular js providing a very easy way to implement basic search and filter data using very less of code.

View

 
<div ng-repeat="datalist in datalists | filter:searchquery">
 <span>Name : {{ datalist.name }}</span>
 <span>Age : {{ datalist.age }}</span>
 <span>Age : {{ datalist.Designation }}</span>
</div>
 

Your filter text box

 
 <input type="text"  value="Search" ng-model="searchquery">
 
 

Note : We are assigning ng-model = "searchquery" to the filter text box .This is the only thing we have to do for filtering the data.

 
$scope.datalists = [
    { "name": "John","age":"16","Designation":"SW"},
    {"name": "Abraham","age":"21","Designation":"SW1"},
    {"name": "Norm","age":"19","Designation":"SW2"},
    {"name": "Leo","age":"17","Designation":"SW3"},
    {"name": "Christino","age":"21","Designation":"SW4"},
    {"name": "Prash","age":"31","Designation":"SW5"},
    {"name": "Saniya","age":"41","Designation":"SW6"},
 {"name": "Vinoj","age":"41","Designation":"SW6"}
    ]
 

Let us take another example .By using the same concept we can filter the data very easily without doing any additional code .Suppose you want to show only the data of people having age 21 ,you can do that filter concept very easily in the view .

Example of those have age 21

 
<div ng-repeat="datalist in datalists | filter:{age:'21'}">
 <span>Name : {{ datalist.name }}</span>
 <span>Age : {{ datalist.age }}</span>
 <span>Age : {{ datalist.Designation }}</span>
</div>
 

Example of those have age 41

 
<div ng-repeat="datalist in datalists | filter:{age:'41'}">
 <span>Name : {{ datalist.name }}</span>
 <span>Age : {{ datalist.age }}</span>
 <span>Age : {{ datalist.Designation }}</span>
</div>
 

If you are facing any issues with quotation ( '21') , you can try filter:{category:"21"}

Join the conversation

What are your thoughts on this blog? Drop us a line below. We’d love to hear from you.

© 2018 Nous Infosystems Pvt. Ltd. All rights reserved.