AngularJS DOM - What is DOM directives in AngularJS
An angularJs uses many directives to bind data per the application's requirement. These directives bind data with the attribute of the DOM element. The directive makes it more accessible to the developer to show data properly on the web application. The AngularJS directives use to hide, show, disable and click event functions with the data.
The following table shows the AngularJS directives and their description in detail.
|
Directive |
Description |
|
ng-disabled |
The directive uses to disable control of the attribute. |
|
ng-show |
The directive uses to show an attribute or data of the element. |
|
ng-hide |
The directive uses to hide an attribute or data of the element. |
|
ng-click |
The directive uses to count the element click. Its works on the click event of the HTML DOM element. |
The "ng-disabled" direction - What is ng-disabled directive in AngularJS
The "ng-disabled" directive disables the given control of the data. It works on the attribute of the DOM element.
Syntax
The following syntax shows the "ng-disabled" directive for the DOM element.
|
<button ng-disabled = "ng-model_name">Click Me!</button> |
Example
The following example shows the "ng-disabled" directive for the DOM element.
|
<!DOCTYPE html> <html> <head> <title>AngularJS DOM Function</title> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body> <h2> The "ng-disabled" Directive</h2> <div ng-app = ""> <input type = "checkbox" ng-model = "Disablefun">Click Checkbox <br><br> <button ng-disabled = "Disablefun"> Enable and Disable!</button> </div> </body> </html> |
Output1: Before Click
Output2: After Click
The "ng-show" direction - What is Ng-show directive in Angularjs
The "ng-show" directive displays the given control of the attribute. This data attribute works on the DOM element.
Syntax
The following syntax shows the "ng-show" directive for the DOM element.
|
<button ng-show = "ng-model_name">Click Me!</button> |
Example
The following example shows the "ng-show" directive for the DOM element.
|
<!DOCTYPE html> <html> <head> <title>AngularJS DOM Function</title> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body> <h2> The "ng-show" Directive</h2> <div ng-app = ""> <input type = "checkbox" ng-model = "showfun">Click Checkbox <br><br> <button ng-show = "showfun"> Enable and Disable!</button> </div> </body> </html> |
Output1: Before Click
Output2: After Click
The "ng-hide" direction
The "ng-hide" directive hides the given control of the attribute. This data attribute belongs to the Html DOM element.
Syntax
The following syntax shows the "ng-hide" directive for the DOM element.
|
<button ng-hide = "ng-model_name">Click Me!</button> |
Example
|
The following example shows the "ng-hide" directive for the DOM element. <!DOCTYPE html> <html> <head> <title>AngularJS DOM Function</title> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body> <h2> The "ng-hide" Directive</h2> <div ng-app = ""> <input type = "checkbox" ng-model = "hidefun">Click Checkbox <br><br> <button ng-hide = "hidefun"> Enable and Disable!</button> </div> </body> </html> |
Output1: Before Click
Output2: After Click
The "ng-click" direction
The "ng-click" directive works for clicking an event disables the given control of the data. It works on the attribute of the DOM element.
Syntax
The following syntax shows the "ng-click" directive for the DOM element.
|
<button ng-click = "click_event">Click Me!</button> |
Example
The following example shows the "ng-click" directive for the DOM element.
|
<!DOCTYPE html> <html> <head> <title>AngularJS DOM Function</title> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body> <h2> The "ng-click" Directive</h2> <div ng-app = ""> <p>Clicks: <b>{{clickHere}}</b></p> <button ng-click = "clickHere = clickHere + 1"> Click Here!</button> </div> </body> </html> |
Output1: Before Click
Output2: After Click
Summary
The DOM element directives control the data and attribute on the web page. It helps users and developers maintain attributes or data of the DOM elements