Hello everyone, I am going to
share the code sample for toggle(show/hide) div using ngShow, ngClick in
angularjs. The example detail as given below.
The
AngularJs Code sample as given below
var cartApp =
angular.module('sCartApp',
[]);
cartApp.controller('sCartCtrl', function($scope) {
$scope.ngShowhide = false;
$scope.ngShowhideFun = function(flag) {
if (flag) {
$scope.ngShowhide = false;
} else {
$scope.ngShowhide = true;
}
};
});
The HTML code sample as given
below
<div ng-app="sCartApp">
<div ng-controller="sCartCtrl">
<div ng-show="ngShowhide">
<div style=" background-color : yellow">
Hi This is body area!
</div>
</div>
</div>
</div>
The full
code HTML and javascript code sample as given below
<!DOCTYPE html>
<html>
<head>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script>
var cartApp =
angular.module('sCartApp',
[]);
cartApp.controller('sCartCtrl', function($scope) {
$scope.ngShowhide = false;
$scope.ngShowhideFun = function(flag) {
if (flag) {
$scope.ngShowhide = false;
} else {
$scope.ngShowhide = true;
}
};
});
</script>
</head>
<body ng-app="sCartApp">
<div ng-controller="sCartCtrl">
<a ng-click="ngShowhideFun(ngShowhide)">angularjs toggle
show hide button</a>
<div ng-show="ngShowhide">
<div style=" background-color : yellow">
Hi This is body area!
</div>
</div>
</div>
</body>
</html>Thank you!!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|