Angularjs in Hindi HTML DOM




AngularJS मे HTML DOM Elements के गुणों के लिए Binding Application Data के निर्देश है. DOM Document Object Model के लिए स्थिर है AngularJS Directives को HTML DOM Elements की विशेषताओ के लिए Application Data को Bind करने के लिए उपयोग मे लाया जाता है.

AngularJS मे सभी निर्देशों का उपयोग HTML DOM Elements के गुणों मे Application Data को Bind करने के लिए किया जाता है. Angularjs मे चार प्रकार के Directive का उपयोग Application Data को Bind करने के लिए किया जाता है.

  • ng-disabled Directive

  • ng-show Directive

  • ng-click Directive

  • ng-hide Directive

ng-disabled Directive

यह Directive AngularJS Application Data को HTML Elements के Disabled विशेषता मे बांधने के लिए उपयोग होती है.

<input type = "checkbox" ng-model = "enableDisableButton">Disable Button
<button ng-disabled = "enableDisableButton">Click Me!</button>

ng-show Directive

इस Directive का उपयोग AngularJS मे एक HTML Elements को दिखाने या छुपाने मे किया जाता है.

<input type = "checkbox" ng-model = "showHide1">Show Button
<button ng-show = "showHide1">Click Me!</button>

ng-click Directive

यह Directive एक AngularJS Click Event को Represent करता है और कुल Click को HTML Element मानता है.

<input type = "checkbox" ng-model = "showHide2">Hide Button
<button ng-hide = "showHide2">Click Me!</button>

ng-hide Directive

यह Directive एक HTML Element को छुपाता है या फिर दिखाता है.

<p>Total click: {{ clickCounter }}</p>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>

For Example

<!DOCTYPE html>
<html>
<head>
<title>AngularJS HTML DOM</title>
</head>
<body>
<h2>AngularJS Sample Application</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 = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>

Output