Menu ▼


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>





comments powered by Disqus


Search dotnetlearners.com