AngularJS with HTML DOM

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

Table of content

1 AngularJS with HTML DOM
2 AngularJS HTML DOM : Example
3 Explanation

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 :

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.