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

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

Read More

Search filter in Textbox Using orderby,filter in AngularJs

Search filter in Textbox Using in AngularJs  

Display some table records we need to filtering some condition by Ascending order or search some words below  Using in AngularJS filter orderby.

Syntax :

{{ orderBy_expression | orderBy : expression : reverse}}

{{ filter_expression | filter : expression : comparator}}

Example:




ng-repeat="course in cou | orderBy:'amount'







ng-repeat="course in cou | orderBy:'amount' | filter : txtSearch"







                                    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", []);

        myapp.controller("Mycontroller", function ($scope)

        {

            var cou = [

            { name: "Anto", course: "Jquery", amount: "9999" },

            { name: "Sam Dany", course: "Asp.Net", amount: "5900"},

            { name: "Rahul", course: "HTML", amount: "8699" },

            { name: "Praveen", course: "C#", amount: "7900" },

            {name:"Prasath",course:"AngularJs",amount:"8998"}];

            $scope.cou = cou;

        });

        </script>

</head>

<body ng-app="MyModule">

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

    <div ng-controller="Mycontroller" align="center">

      <table><tr><td>

          <asp:Label ID="Label1" runat="server" Text="Search" ForeColor="#FF3300"></asp:Label></td>

          <td><asp:TextBox ID="TextBox1" ng-model="txtSearch" runat="server"></asp:TextBox></td></tr></table> 

    <table>

        <thead>

            <tr>

                <th>Name</th>

                <th>Course</th>

                <th>Amount</th>

            </tr>

        </thead>

        <tbody>

            <tr  ng-repeat="course in cou | orderBy:'amount' | filter : txtSearch">

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

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

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

            </tr>

        </tbody>

    </table>

    </div>

    </form>

</body>

</html>

First - Add Form - Next assign ng-App and Controller with records

Next - ng-model - add the expression filter ,Orderby and textboxsearch

Read More