Post
Ask Question

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>  




 


Similar Articles