Today, let me discuss about HTML DOM(Document Object Model) in Angular JS.
To hide any item/button in Angular JS, various directives are available.Simply,we need to declare the directives, to hide/show the buttons.
It can be explained further with the suitable example.
ng.html:-
<html>
<head>
<title>AngularJS HTML DOM</title>
</head>
<body>
<h2>AngularJS NG Directives</h2>
<div ng-app="">
<table border="0">
<tr>
<td><input type="checkbox" ng-model="enableDisableButton">Disable Button</td>
<td><button ng-disabled="enableDisableButton">Click Me!</button></td>
</tr>
<tr>
<td><input type="checkbox" ng‐model="showHide1">Show Button</td>
<td><button ng-show="showHide1">Click Me!</button></td>
</tr>
<tr>
<td><input type="checkbox" ng-model="showHide2">Hide Button</td>
<td><button ng-hide="showHide2">Click Me!</button></td>
</tr>
<tr>
<td><p>Total click: {{clickCounter}}</p></td>
<td><button ng-click="clickCounter = clickCounter + 1">Click Me!</button></td>
</tr>
</table>
</div>
<script src="angular.min.js"></script>
</body>
</html>
Screenshots:-
To hide any item/button in Angular JS, various directives are available.Simply,we need to declare the directives, to hide/show the buttons.
It can be explained further with the suitable example.
ng.html:-
<html>
<head>
<title>AngularJS HTML DOM</title>
</head>
<body>
<h2>AngularJS NG Directives</h2>
<div ng-app="">
<table border="0">
<tr>
<td><input type="checkbox" ng-model="enableDisableButton">Disable Button</td>
<td><button ng-disabled="enableDisableButton">Click Me!</button></td>
</tr>
<tr>
<td><input type="checkbox" ng‐model="showHide1">Show Button</td>
<td><button ng-show="showHide1">Click Me!</button></td>
</tr>
<tr>
<td><input type="checkbox" ng-model="showHide2">Hide Button</td>
<td><button ng-hide="showHide2">Click Me!</button></td>
</tr>
<tr>
<td><p>Total click: {{clickCounter}}</p></td>
<td><button ng-click="clickCounter = clickCounter + 1">Click Me!</button></td>
</tr>
</table>
</div>
<script src="angular.min.js"></script>
</body>
</html>
Screenshots:-
Explanation:-
Here, in the above example, "ng-disabled" directive has been used to disable the button, once it is clicked. "ng-show" directive can be used to show/display the button on the screen. "ng-hide" directive is used to hide the button in the screen, which can be used based upon the requirement. "ng-click" directive can be used to use the click functionality of a button(or any link) in the page. Here, it is used to check the number of clicks in the specific button.
No comments:
Post a Comment