In AngularJs, we can show and hide the div using ng-show and ng-disabled directives. Which are given below.
- ng-show directive {{ This directive is used to show the div }}
- ng-disabled directive {{ This directive is used to show the div }}
The AngularJs code example
1
2
3
4
| var $scope;var app = angular.module('myapp', []);function myControl($scope) {} |
var $scope;
var app = angular.module('myapp', []);
function myControl($scope) {
}
The live example code
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html><html><head lang="en"><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script><script> var $scope; var app = angular.module('myapp', []); function myControl($scope) { }</script></head><body> <div ng-app="myapp"> <div ng-controller="myControl"> First Name : <input type="text" ng-model="fName" /><br> Last Name : <input type="text" ng-model="lName" /><br> <button ng-disabled="!fName || !lName">Submit</button> </div></div></body></html> |
<!DOCTYPE html>
<html>
<head lang="en">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script>
var $scope;
var app = angular.module('myapp', []);
function myControl($scope) {
}
</script>
</head>
<body>
<div ng-app="myapp">
<div ng-controller="myControl">
First Name : <input type="text" ng-model="fName" /><br>
Last Name : <input type="text" ng-model="lName" /><br>
<button ng-disabled="!fName || !lName">Submit</button>
</div>
</div>
</body>
</html>