ng-show directive used to show or hide the html element based on the expression or value assigned to it.ng-show directive hide or show the element by removing or adding the .ng-hide class which is predefined in the Angular. In the .ng-hide class if false value assigned to the ng-show then display property is set to none otherwise display block property is set to show the element.
Let try to understand with example:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
<div>
<div ng-show="true">My ng-show value is True. So I am Visible.</div>
<div ng-show="false">My ng-show value is False. So I am not visible.</div>
</div>
</body>
</html>
Ng-show value is true of first div element so this div will show and second div will hide.
ng-hide directive used to hide or show the html element based on the expression or value assigned to it.ng-hide directive show or hide the element by removing or adding the .ng-hide class which is predefined in the Angular. In the .ng-hide class if true value assigned to the ng-hide then display property is set to none otherwise display block property is set to show the element.Let's try to understand with example:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
<div>
<div ng-hide="true">My ng-hide value is True. So I am not Visible.</div>
<div ng-hide="false">My ng-hide value is False. So I am visible.</div>
</div>
</body>
</html>
ng-disabled directive set the element disable on which we define this directive if the assigned value to this directive is true. We can disable inputs,select list, buttons etc using this directive.Let's try to understand with example:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
<div>
<div class="container">
<div class="row">
<div class="col-md-2">
<input class="form-control" type="text" ng-disabled="true" />
</div>
<div class="col-md-2">
<textarea class="form-control" ng-disabled="true"></textarea>
</div>
<div class="col-md-2">
<button class="form-control" ng-disabled="true">Save</button>
</div>
</div>
</div>
</div>
</body>
</html>
ng-readonly directive set the element readonly on which we define this directive if the assigned value to this directive is true. We can make inputs,select list, buttons etc readonly using this directive. Lets see the example of ng-readonly.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
<div>
<div class="container">
<div class="row">
<div class="col-md-2">
<input class="form-control" type="text" ng-readonly="true" />
</div>
<div class="col-md-2">
<textarea class="form-control" ng-readonly="true"></textarea>
</div>
<div class="col-md-2">
<button class="form-control" ng-readonly="true">Save</button>
</div>
</div>
</div>
</div>
</body>
</html>