AngularJS Filter Example


AngularJS filter is used get the subset of items form an Array or Object.

Example:
This example we will see how to filter the collection and bind it to table.
Student List= [
{ Name: "James", Marks: "980", Grade : "A" },
{ Name: "Steave", Marks: "863", Grade: "B" },
{ Name: "Mark", Marks: "695", Grade: "D" },
{ Name: "Smith", Marks: "776", Grade: "C" },
{ Name: "Rahul", Marks: "801", Grade: "B" },
{ Name: "William", Marks: "740", Grade: "C" },
{ Name: "Raman", Marks: "880", Grade: "B" },
{ Name: "Raju", Marks: "990", Grade: "A" }];

  • Filter:

    Name Marks Grade
    {{ student.Name}} {{ student.Marks}} {{ student.Grade}}

  • Filter Name:

    Name Marks Grade
    {{ student.Name}} {{ student.Marks}} {{ student.Grade}}

Source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .tblstudents { border-collapse: collapse; border: solid 1px #ccc; } .tblstudents th, .tblstudents td { border: solid 1px #ccc; padding: 5px; } .tblstudents th { text-decoration: underline; cursor: pointer; } </style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> </head> <body> <div ng-app="SampleApp" ng-controller="SampleCntrl"> Student List= [<br /> { Name: "James", Marks: "980", Grade : "A" },<br /> { Name: "Steave", Marks: "863", Grade: "B" },<br /> { Name: "Mark", Marks: "695", Grade: "D" },<br /> { Name: "Smith", Marks: "776", Grade: "C" },<br /> { Name: "Rahul", Marks: "801", Grade: "B" },<br /> { Name: "William", Marks: "740", Grade: "C" },<br /> { Name: "Raman", Marks: "880", Grade: "B" },<br /> { Name: "Raju", Marks: "990", Grade: "A" }];<br /> <br /> <ul> <li>Filter: <input type="text" ng-model="strfilter" /> <br /> <br /> <table class="tblstudents"> <thead> <tr> <th> Name </th> <th> Marks </th> <th> Grade </th> </tr> </thead> <tbody> <tr ng-repeat="student in studentlist | filter : strfilter"> <td> {{ student.Name}} </td> <td> {{ student.Marks}} </td> <td> {{ student.Grade}} </td> </tr> </tbody> </table> <br /> </li> <li> Filter Name: <input type="text" ng-model="strfilterName.Name" /> <br /> <br /> <table class="tblstudents"> <thead> <tr> <th> Name </th> <th> Marks </th> <th> Grade </th> </tr> </thead> <tbody> <tr ng-repeat="student in studentlist | filter : strfilterName "> <td> {{ student.Name}} </td> <td> {{ student.Marks}} </td> <td> {{ student.Grade}} </td> </tr> </tbody> </table> </li> </ul> </div> <script> var myapp = angular.module("SampleApp", []); myapp.controller("SampleCntrl", function ($scope) { $scope.studentlist = [ { Name: "James", Marks: "980", Grade: "A" }, { Name: "Steave", Marks: "863", Grade: "B" }, { Name: "Mark", Marks: "695", Grade: "D" }, { Name: "Smith", Marks: "776", Grade: "C" }, { Name: "Rahul", Marks: "801", Grade: "B" }, { Name: "William", Marks: "740", Grade: "C" }, { Name: "Raman", Marks: "880", Grade: "B" }, { Name: "Raju", Marks: "990", Grade: "A" } ]; }); </script> </body> </html>