HTML DOM لـ AngularJS

هذه الإرشادات تستخدم لربط بيانات التطبيق بخصائص عناصر DOM HTML-

الترتيب	الاسم والوصف
1	`ng-disabled` تعطيل العنصر المحدد.
2	`ng-show` عرض العنصر المحدد.
3	`ng-hide` إخفاء العنصر المحدد.
4	`ng-click` يُمثل الحدث AngularJS click.

إرشاد ng-disabled

أضف خاصية ng-disabled إلى زر HTML، ثم قم بتوصيلها بالنموذج. قم بتحديد النموذج في مربع التحقق، ثم راقب التغييرات.

<input type="checkbox" ng-model="enableDisableButton">تعطيل الزر<button ng-disabled="enableDisableButton">انقر هنا!</button>

تعليمات ng-show

أضف خاصية ng-show إلى زر HTML وأمرها بتوصيلها إلى النموذج. ربط النموذج إلى مربع الاختيار ثم استكشاف التغييرات.

<input type="checkbox" ng-model="showHide1">عرض الزر<button ng-show="showHide1">انقر هنا!</button>

تعليمات ng-hide

أضف خاصية ng-hide إلى زر HTML وأمرها بتوصيلها إلى النموذج. ربط النموذج إلى مربع الاختيار ثم استكشاف التغييرات.

<input type="checkbox" ng-model="showHide2">إخفاء الزر<button ng-hide="showHide2">انقر هنا!</button>

تعليمات ng-click

أضف خاصية ng-click إلى زر HTML واستخدم التحديث. ربط النموذج إلى HTML واستكشاف التغييرات.

<p>عدد النقرات الإجمالي: {{ clickCounter }}</p><button ng-click="clickCounter = clickCounter + 1">انقر هنا!</button>

مثال عبر الإنترنت

في هذا المثال، يتم عرض استخدام جميع التعليمات المذكورة أعلاه.

testAngularJS.htm

مثال

<html>
　　　<head>
　　　　　　<title>AngularJS HTML DOM</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>مثال AngularJS-HTML DOM (oldtoolbag.com)</h2>
　　　　　　
　　　　　　<div ng-app="">
　　　　　　　　　<table border="0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><input type="checkbox" ng-model="enableDisableButton">تعطيل الزر</td>
　　　　　　　　　　　　　　　<td><button ng-disabled="enableDisableButton">انقر هنا!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><input type="checkbox" ng-model="showHide1">عرض زر</td>
　　　　　　　　　　　　　　　<td><button ng-show="showHide1">انقر لي!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><input type="checkbox" ng-model="showHide2">إخفاء الزر</td>
　　　　　　　　　　　　　　　<td><button ng-hide="showHide2">انقر لي!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><p>عدد النقرات الإجمالي: {{ clickCounter }}</p></td>
　　　　　　　　　　　　　　　<td><button ng-click="clickCounter = clickCounter + 1">انقر لي!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　</div>
　　　　　　
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>

اختبار لمعرفة‹/›

أظهر النتائج

افتح ملف في متصفح الويبtestAngularJS.htmوشاهد النتائج.

مودل AngularJS جداول AngularJS