Angular js Basic Search and Filter Data with Example

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"}