شما می توانید با استفاده از عبارات زیر داده ها را به عناصر DOM در HTML متصل کنید.
ng-disabled : کنترل معینی را غیرفعال می کند.
ng-show : کنترل معینی را نشان می دهد.
ng-hide : کنترل معینی را مخفی می کند.
ng-click : یک رویداد کلیک کردن را تعریف می کند.
توضیحات موارد بالا:
ng-disabled :
در مثال زیر با استفاده از عبارت ng-disabled در تگ button قابلیت غیرفعال کردن را برای آن تعریف کرده ایم و در تگ input با استفاده از ng-model داده ها را از ورودی گرفته و به دکمه می دهیم. یعنی با کیلک کردن بر روی checkbox دکمه موجود غیر فعال می شود.
<input type="checkbox" ng-model="enableDisableButton">Disable Button
<button ng-disabled="enableDisableButton">Click Me!</button>
: ng-show
با استفاده از این عبارت می توان قابلیت نمایش دادن را برای عناصر مختلف قرار دارد. در مثال زیر با کلیک کردن بر روی checkbox دکمه موجود نمایش داده می شود.( دکمه در ابتدا پنهان است و با کلیک کردن روی checkbox نمایش داده می شود )
<input type="checkbox" ng-model="showHide1">Show Button
<button ng-show="showHide1">Click Me!</button>
: ng-hide
به کمک این عبارت قابلیت مخفی شدن را برای عناصر مختلف تعریف می کنیم. در مثال زیر با کلیک بر روی checkbox موجود عنصر button پنهان می شود.
<input type="checkbox" ng-model="showHide2">Hide Button
<button ng-hide="showHide2">Click Me!</button>
ng-click :
در مثال زیر با کیلک کردن پیاپی روی دکمه تعداد کلیک ها را می بینیم. در واقع عبارت ng-click اطلاعات را از دکمه می گیرد و به clickCounter می دهد که تعداد کلیک ها را می شمارد.
<p>Total click: {{ clickCounter }}</p></td>
<button ng-click="clickCounter = clickCounter + 1">Click Me!</button>
در مثال زیر کاربرد همه ی موارد بالا را ببینید :
<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="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>
</body>
</html>
و اما خروجی مثال بالا :
