AngularJS Framework : Directives II - ng-show, ng-hide, and ng-disabled
bogotobogo.com site search:
HTML DOM
AngularJS has directives for binding application data to the attributes of HTML DOM elements.
ng-show Directive
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p ng-show="true">Visible.</p>
<p ng-show="false">Not visible.</p>
</div>
</body>
</html>
ng-hide Directive
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p ng-hide="true">ng-hide="true" - Not visible.</p>
<p ng-hide="false">ng-hide="false" - Visible.</p>
</div>
</body>
</html>
ng-disabled Directive
The ng-disabled directive binds AngularJS application data to the disabled attribute of HTML elements:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="myButton=true">
<button ng-disabled="myButton">Click Me!</button>
<br /><br />
<input type="checkbox" ng-model="myButton"/>Button
<br /><br />
Disabled : {{ myButton }}
</div>
</body>
</html>
The ng-disabled directive binds the application data myButton to the HTML button's disabled attribute. The ng-model directive binds the value of the HTML checkbox element to the value of myButton. If the value of myButton evaluates to true, the button will be disabled.
AngularJS
Ph.D. / Golden Gate Ave, San Francisco / Seoul National Univ / Carnegie Mellon / UC Berkeley / DevOps / Deep Learning / Visualization
My YouTube channel