How to Create a Custom Filter using AngularJs in Asp.Net

01:55:00  , , ,  1 comment

Custom Filter using  AngularJs

AngularJs Filter using to custom filter for the like Email,phone number , name or length difference also filter with condition using in AngularJs Filter.

 DEMO
HTML 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript">
        var Myapp = angular.module("MyModule", [])

        //Custom Filter
        Myapp.filter("AmountFilter", function () {
            return function (amount) {
                if (amount <= 5000) {
                    return "Less than 5000" + " :: " + "Original Amount=" + amount;
                }
                else {

                    return amount;
                }
            }
        });

        Myapp.controller("MyController", function ($scope)
        {
            var cou = [
                { course: "JavaScript",amount: "9889" },
                { course: "Jquery", amount: "6999" },
                { course: "AngularJs", amount: "4999" },
                { course: "Asp.Net", amount: "5555" },
                {course:"C#",amount:"2999"}
            ];
            $scope.cou = cou;
        });

        </script>
</head>
<body ng-app="MyModule">

    <form id="form1" runat="server">

    <div ng-controller="MyController">
    <table>
        <thead>
            <tr>
                <th>Course</th>
                <th>Amount</th>
            </tr>
          
        </thead>
        <tbody>
            <tr ng-repeat="course in cou">

                <td>{{course.course}}</td>

                <td>{{course.amount | AmountFilter}}</td>

            </tr>
        </tbody>
    </table>
    </div>
    </form>
</body>
</html>

First - Add New Webform - Add Angularjs  js file - add custom filter condition 





 Next - Add filter model(amount) to the control


1 comment: