Angular

AngularJS Recipe: Part 4

This is the continuation from AngularJS Recipe: Part 3.

# ng-show Directive

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title></title>  
  7.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  8.     <script src="employeeController.js"></script>  
  9. </head>  
  10. <body>  
  11.     <form id="form1" runat="server">  
  12.         <div ng-app="">  
  13.             <p ng-show="true">I Can Show</p>  
  14.             <p ng-show="false">Oops.. I am hide.</p>  
  15.             <p ng-hide="true">Not Visible.</p>  
  16.             <p ng-hide="false">I am Visible.</p>  
  17.         </div>  
  18.     </form>  
  19. </body>  
  20. </html>  


# Button and click event in AngularJS
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  7.     <script>  
  8.         var app = angular.module('myApp', []);  
  9.         app.controller('myCtrl', function ($scope) {  
  10.             $scope.count = 0;  
  11.         });  
  12.     </script>  
  13. </head>  
  14. <body>  
  15.     <div ng-app="myApp" ng-controller="myCtrl">  
  16.         <button ng-click="count = count + 1">Count Me!</button>  
  17.         <p>Your Total Count:  {{ count }}</p>  
  18.     </div>  
  19. </body>  
  20. </html>  




# Another Example Of Button Click in AngularJS
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  7.     <script>  
  8.         var app = angular.module('myApp', []);  
  9.         app.controller('empCtrl', function ($scope) {  
  10.             $scope.Name = "Rahul Saxena",  
  11.             $scope.address = "Noida, India"  
  12.             $scope.myVar = false;  
  13.   
  14.             $scope.GetAllInfo = function () {  
  15.                 $scope.FullName = $scope.Name + "  " + $scope.address;  
  16.             }  
  17.         });  
  18.     </script>  
  19.   
  20. </head>  
  21. <body>  
  22.     <div ng-app="myApp" ng-controller="empCtrl">  
  23.         <p>  
  24.             Name:      
  25.             <input type="text" ng-model="Name"><br />  
  26.             <br />  
  27.             Address:  
  28.             <input type="text" ng-model="address"><br />  
  29.             <br>  
  30.             <button ng-click="GetAllInfo()">Get Info</button>  
  31.             <br />  
  32.             <br />  
  33.             Employee Information : {{FullName}}  
  34.         </p>  
  35.     </div>  
  36. </body>  
  37. </html>  


# Show Hide on button Click in AngularJS

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title></title>  
  7.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  8.     <script>  
  9.         var app = angular.module('myApp', []);  
  10.         app.controller('empCtrl', function ($scope) {  
  11.             $scope.Name = "Rahul Saxena",  
  12.             $scope.address = "Noida, India"  
  13.             $scope.myVar = true;  
  14.             $scope.toggle = function () {  
  15.                 $scope.myVar = !$scope.myVar;  
  16.             }  
  17.         });  
  18.     </script>  
  19.   
  20. </head>  
  21. <body>  
  22.     <div ng-app="myApp" ng-controller="empCtrl">  
  23.         <p ng-show="myVar">  
  24.             Name:      
  25.             <input type="text" ng-model="Name"><br />  
  26.             <br />  
  27.             Address:  
  28.             <input type="text" ng-model="address"><br />  
  29.         </p>  
  30.         <p>  
  31.             <button ng-click="toggle()">Toggle</button>  
  32.         </p>  
  33.     </div>  
  34.   
  35. </body>  
  36. </html>  




 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs