Html DOM
Advertisements
Html DOM
AngularJS has directives for binding application data to the attributes of HTML DOM elements. The following directives are used to bind application data to the attributes of HTML DOM elements;
| S.No. | Name | Description |
|---|---|---|
| 1 | ng-disabled | To Disables a given control of Html elements. |
| 2 | ng-show | To Shows a given control of Html elements. |
| 3 | ng-hide | To Hides a given control of Html elements. |
| 4 | ng-click | To perform AngularJS click event. |
ng-disable Directive
ng-disable directive are use for binds AngularJS application data to the disabled attribute of HTML elements.
Example
<div ng-app=""> <input type="checkbox" ng-model="enableDisableButton">Disable Button <button ng-disabled="enableDisableButton">Click Me!</button> </div>
Result
Disable Button
ng-show Directive
ng-show directive are use for show or hide Html elements.
<div ng-app=""> <input type="checkbox" ng-model="hideme">Show Button <button ng-show="hideme">Click Me!</button> </div>
ng-hide Directive
ng-hide directive are use for hide or show an Html elements.
Example
<div ng-app=""> <input type="checkbox" ng-model="hideme">Hide Button <button ng-hide="hideme">Click Me!</button> </div>
ng-click Directive
ng-click directive are use for perform an AngularJS click event.
Example
<div ng-app="" ng-controller="clickController">
<button ng-click="count = count + 1">Click Me!</button>
<p>{{ count }}</p>
</div>
<script>
function clickController($scope) {
$scope.count = 0;
}
</script>
Google Advertisment