Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

AngularJS Recipe - Part 4

Article:
Viewed:  932 
Posted On:  25/04/2015 21:52:48 
This is the continuation of my previous article. AngularJS Recipe - Part 3.  

 

This is the continuation of AngularJS Recipe - Part 3

http://www.dotnetcodesg.com/Article/UploadFile/2/14410/AngularJS%20Recipe%20-%20Part%203.aspx


 # ng-show Directive:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="employeeController.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="">
 
            <p ng-show="true">I Can Show</p>
            <p ng-show="false">Oops.. I am hide.</p>
            <p ng-hide="true">Not Visible.</p>
            <p ng-hide="false">I am Visible.</p>
        </div>
    </form>
</body>
</html>


25.png

Image 25.

 

# Button and click event in AngularJS:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.count = 0;
        });
    </script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <button ng-click="count = count + 1">Count Me!</button>
        <p>Your Total Count:  {{ count }}</p>
    </div>
</body>
</html>
 

26.png 

Image 26.

 
27.png

Image 27.

 

# Another Example Of Button Click in AngularJS:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('empCtrl', function ($scope) {
            $scope.Name = "Rahul Saxena",
            $scope.address = "Noida, India"
            $scope.myVar = false;
 
            $scope.GetAllInfo = function () {
                $scope.FullName = $scope.Name + "  " + $scope.address;
            }
        });
    </script>
 
</head>
<body>
    <div ng-app="myApp" ng-controller="empCtrl">
        <p>
            Name:   
            <input type="text" ng-model="Name"><br />
            <br />
            Address:
            <input type="text" ng-model="address"><br />
            <br>
            <button ng-click="GetAllInfo()">Get Info</button>
            <br />
            <br />
            Employee Information : {{FullName}}
        </p>
    </div>
</body>
</html>

28.png

Image 28.

29.png

Image 29.


# Show Hide on button Click in AngularJS:

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('empCtrl', function ($scope) {
            $scope.Name = "Rahul Saxena",
            $scope.address = "Noida, India"
            $scope.myVar = true;
            $scope.toggle = function () {
                $scope.myVar = !$scope.myVar;
            }
        });
    </script>
 
</head>
<body>
    <div ng-app="myApp" ng-controller="empCtrl">
        <p ng-show="myVar">
            Name:   
            <input type="text" ng-model="Name"><br />
            <br />
            Address:
            <input type="text" ng-model="address"><br />
        </p>
        <p>
            <button ng-click="toggle()">Toggle</button>
        </p>
    </div>
 
</body>
</html>
 
30.png 

Image 30.

 

31.png

Image 31.

 

32.png 

Image 32.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us