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" %>
  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;
  14. $scope.GetAllInfo = function () {
  15. $scope.FullName = $scope.Name + " " + $scope.address;
  16. }
  17. });
  18. </script>
  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" %>
  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>
  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>
  35. </body>
  36. </html>