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>
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>
Image 26.
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>
Image 28.
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>
Image 30.
Image 31.
Image 32.