AngularJS with HTML DOM

In AngularJS it is possible to bind application data to an attribute of HTML DOM element.

AngularJS with HTML DOM

No. Name Description
1 ng-disabled It is used to disable a given control
2 ng-show It is used to show a given control.
3 ng-hide It is used to hide a given control.
4 ng-click It is used to represent an AngularJS click event.

AngularJS HTML DOM : Example

<!DOCTYPE html>
<html>

<head>
<script src="angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-controller="controller1">

<p>Toggle check buttons to check the status..</p>

<table border="1">
   <tr>
      <td>Disable Button</td>
      <td>Show Button</td>
      <td>Hide Button</td>
   </tr>
   <tr>
      <td><input type="checkbox" ng-model="isChecked1"></td>
      <td><input type="checkbox" ng-model="isChecked2"></td>
      <td><input type="checkbox" ng-model="isChecked3"></td>
   </tr>
   <tr>
      <td><button ng-disabled="isChecked1">Disable</button></td>
      <td><button ng-show="isChecked2">Show</button></td>
      <td><button ng-hide="isChecked3">Hide</button></td>
   </tr>
   <tr>
      <td>{{isChecked1}}</td>
      <td>{{isChecked2}}</td>
      <td>{{isChecked3}}</td>
   </tr>
</table>

</div>

<script>
function controller1($scope) {
   $scope.isChecked1 = true;
   $scope.isChecked2 = true;
   $scope.isChecked3 = true;
}
</script>

</body>
</html>

Output :
AngularJS HTML DOM

Explanation

In the AngularJS we can manage the attribute of an element using the AngularJS directives.

ng-disabled directive

Consider the below code of the button control in HTML –

<button ng-disabled="isChecked1">Disable</button>

In this case ng-disabled attribute will decide whether to disable the control or not depending on the value of isChecked1 variable

We can toggle the value of the isChecked1 on the basis of checkbx check value. Using ng-model directive we can bind the value to variable

<input type="checkbox" ng-model="isChecked1">

ng-show directive

The ng-show directive shows or hides the given HTML element based on the expression provided to the ng-show attribute

ng-hide directive

Add ng-hide attribute to a HTML button and pass it a model. Bind the model to an checkbox and see the variation.

ng-click directive

Add ng-click attribute to a HTML button and update a model. Bind the model to html and see the variation.