AngularJS HTML DOM
يوفر AngularJS تعليمات لربط بيانات التطبيق لخصائص عناصر HTML DOM.
الأمر NG المعتمد
يربط التوجيه المعتمد NG مباشرة بيانات التطبيق إلى السمة المعطلة لـ HTML.
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <viv ng-app = "" " ng-init = "myswitch = true"> <p> <button ng-disabled = "myswitch"> انقر فوق لي! </button> </p> <p> <proud type = "checkbox" ng-model = "myswitch"/> button </p> <p> {{myswitch}}تأثير الجري:
زر
حقيقي
مثال على التوضيح:
يربط التوجيه المعتمد NG بيانات التطبيق "mySwitch" إلى الخاصية المعوقة لـ HTML.
يربط توجيه NG-Model "MySwitch" بالمحتوى (القيمة) لعنصر مربع الاختيار HTML.
إذا كان MySwitch صحيحًا ، فلن يكون الزر متاحًا:
<p> <تعطيل الزر> انقر لي! </utton> </p>
إذا كان MySwitch خطأ ، فإن الزر متاح:
<p> <butten> انقر فوق لي! </button> </p>
NG-Show Command
يختبئ توجيه NG-Show أو يعرض عنصر HTML.
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js مرئي. </p> <p ng-show = "false"> أنا غير مرئي. </p> </viv> </body> </html>
تأثير الجري:
أنا مرئي.
يعرض توجيه NG-Show عناصر HTML بناءً على قيمة القيمة.
يمكنك استخدام التعبيرات لحساب القيم المنطقية (صواب أو خطأ):
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-show = "ساعة> 12"> أنا مرئي. </p> </viv> </body> </html>
نتائج التشغيل:
أنا مرئي.
ملاحظة في الفصل التالي ، سنوفر لك المزيد من الأمثلة على إخفاء عناصر HTML من خلال النقر على الأزرار.
أمر ng-hide
يتم استخدام التوجيه NG-Hide لإخفاء أو عرض عناصر HTML.
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js غير مرئي. </p> <p ng-hide = "false"> أنا مرئي. </p> </viv> </body> </html>
نتائج التشغيل:
أنا مرئي.
ما سبق هو مجموعة من مواد DOM HTML HTML. سوف نستمر في إضافتها لاحقًا. آمل أن يكون الأصدقاء الذين يمكنهم المساعدة في برنامج AngularJS.