Search filter in Textbox Using orderby,filter in AngularJs

06:38:00  , , ,  1 comment

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






1 comment: