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

AngularJs Using in Masterpage Asp.Net

AngularJs Using in Masterpage Asp.Net

AngularJs is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. 

The AngularJS Components

1.ng-app   - AngularJS application to HTML.

2.ng-model - AngularJS application data to HTML input controls.

3.ng-bind - AngularJS Application data to HTML tags.

Ex : {{ng-bind}}

What is AnjularJS

DEMO

HTML

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ng-app ContentPlaceHolderID="head" Runat="Server">

       <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

     

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <div align="center" ng-app>

        <h1>AnjularJs Using in Masterpage</h1>

<table><tr><td>

    <asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>

    </td><td>

        <asp:TextBox ID="TextBox1" ng-model="name" runat="server"></asp:TextBox>

    </td><td style="color:red">{{name}}</td></tr>

    <tr><td>

        <asp:Label ID="Label2" runat="server" Text="Email"></asp:Label>

        </td><td>

            <asp:TextBox ID="TextBox2" ng-model="email" runat="server"></asp:TextBox>

        </td><td style="color:red">{{email}}</td></tr>

    <tr><td>

        <asp:Label ID="Label3" runat="server" Text="Mobile Number"></asp:Label>

        </td><td>

            <asp:TextBox ID="TextBox3" ng-model="mobile" runat="server"></asp:TextBox>

        </td><td style="color:red">{{mobile}}</td></tr>

    <tr><td colspan="2" style="color:deeppink">{{name}},{{email}},{{mobile}}</td></tr>

</table>

    </div>

</asp:Content>

First Add new webform - Add Masterpage - Head section Contentplaceholder inside add AngularJs Script Plugin

Next - Add ng-app add to div tab - ng-modal add for name,mobile,email  and bind {{ng-bind}} individually even with total binding

Read More