Showing posts with label AngularJs. Show all posts
Showing posts with label AngularJs. Show all posts

AngularJs Intellisense Add to Visual Studio

05:30:00  , ,  No comments

AngularJs Intellisense Add to Visual Studio 

angular.intellisense.js file that allows for auto-update of references to drive intellisense.


 AngularJs  working within Visual Studio important to keep the intellisense . that is how to add the visual studio reference to file below show that.


 C:\Program Files\Microsoft Visual Studio 11.0\JavaScript\References\angular.intellisense

 Click here to Download Angularjs.intellisense.js 



Read More

Image Display in AngularJs ng src directive Using in AngularJs Asp.Net

05:05:00  , , ,  No comments

Image Display in AngularJs ng src directive 

AngularJs ng src directive call the specific directive location mention from server or local folder . here how to use and call the directive in AngularJs.
                                         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("dotModule", []);
        MyApp.controller("dotController",function ($scope){

            var Drizzles = [

                {name: "AngularJs in Masterpage", link: "https://dotnetdrizzles.blogspot.in/2016/04/anjularjs-using-in-masterpage-aspnet.html", demo: "/Master.gif"},
                {name: "AngularJs Date Function", link: "https://dotnetdrizzles.blogspot.in/2016/05/angularjs-date-function-format-date-and.html", demo: "/Date.png"},
                {name: "AngularJs ng-show,hide Directive.", link: "https://dotnetdrizzles.blogspot.in/2016/05/angulrjs-ng-show-and-ng-hideng-init.html", demo: "/ng-show.gif"}


            ];
            $scope.Drizzles =Drizzles;
        });
    </script>
</head>


    <body ng-app="dotModule">
    <form id="form1" runat="server">
    <div ng-controller="dotController">

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Link</th>
            <th>DEMO</th>
        </tr>       
    </thead>
    <tbody>
        <tr ng-repeat="Drizz in Drizzles">
             <td><img id="im" src="{{Drizz.demo}}" height="150" width="250" />

            <td style="color:blue;font-family:Verdana">{{Drizz.name}}</td>
            <td style="color:red;font-family:Verdana">{{Drizz.link}}</td>
</td>
        </tr>
    </tbody>
</table>
    </div>
    </form>
</body>
</html>


Add new form - Add Angularjs script - Add the controller with the image directive 





Next -  Add the controller to div tag ng-repeat to bind the image from Location











Read More

AngularJs ng show and ng hide,ng init directive Using in AnjularJs

03:59:00  , , ,  No comments

AngularJs ng show and ng hide,ng init directive

AngularJs ng show and ng hide used to record display and hide when user action . ng init directive used to access the inside of the current controller Scope.

 ng-show="Hide"

 ng-hide="Show"
ng-init="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' }];
   

    
                                   DEMO



HTML CODING


<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>

</head>
<body ng-app>
    <form id="form1" runat="server">
    <div align="center" ng-init="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' }]; ">
   
        <input type="checkbox"  ng-model="Hide" />HIDE/SHOW
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Course</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="course in cou">
                    <td>{{course.name}}</td>
                    <td style="color:red" ng-show="Hide">{{course.course}}</td>
                </tr>
            </tbody>
        </table>

    </div>
    </form>
</body>
</html>



Add New Webform - Add ng-init to directly current scope <div ng-init="">  - next - add ng-show  for when checkbox check only show





Read More

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


Read More

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






Read More