تعبيرات AngularJS
يستخدم AngularJS تعبيرات لربط البيانات بـ HTML.
تتم كتابة تعبير AngularJS في أقواس مزدوجة: {{expression}} .
تعبيرات AngularJS تربط البيانات بـ HTML ، والتي تشبه التوجيه NG-bind .
سوف AngularJS بيانات "الإخراج" في الموقع الذي تتم كتابة التعبير.
تعبيرات AngularJS تشبه إلى حد كبير تعبيرات JavaScript : يمكن أن تحتوي على حرفية ومشغلين ومتغيرات.
مثيل {{5 + 5}} أو {{firstName + "" + lastName}}
رمز المثال:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js }} </p> </viv> </body> </html>
نتائج التشغيل:
تعبيري الأول: 10
أرقام AngularJS
أرقام AngularJS مثل أرقام JavaScript:
رمز المثال:
<! 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 = "Quantity = 1 ؛ Cost = 5"> <p> السعر الإجمالي: {{Quantity * Cost}} </p> </viv> </body> </html>نتائج التشغيل:
السعر الإجمالي: 5
نفس المثال باستخدام NG-bind:
رمز المثال:
<! 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 = "Quantity = 1 ؛ Cost = 5"> <p> السعر الإجمالي: <span ng-bind = "Quantity * Cost"> </p> </p> </viv> </body> </html>
نتائج التشغيل:
السعر الإجمالي: 5
ملاحظة: استخدام NG-Init ليس شائعًا جدًا. سوف تتعلم طريقة أفضل لتهيئة البيانات في فصل وحدة التحكم.
سلسلة AngularJS
سلاسل AngularJS مثل سلاسل JavaScript:
رمز المثال:
<! 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 = "firstName = 'John' ؛ lastName = 'doe'"> <p> name: {{firstName + "" + lastName}} </p> </viv> </body> </html>نتائج التشغيل:
الاسم: جون دو
نفس المثال باستخدام NG-bind:
رمز المثال:
<! 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 = "firstName = 'John' ؛ lastName = 'doe'"> <p> name: <span ng-bind = "firstName + '' + lastName"> </pan> </p> </viv> </body> </html>
نتائج التشغيل:
الاسم: جون دو
كائنات AngularJS
كائنات AngularJS مثل كائنات JavaScript:
رمز المثال:
<! 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 = "person = {firstName: 'John' ، lastName: 'doe'}"> <p> الاسم الأخير هو {{person.lastname}} </p> </viv> </body> </html>نتائج التشغيل:
اسمه دو
نفس المثال باستخدام NG-bind:
رمز المثال:
<! 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 = "person = {firstName: 'John' ، lastName: 'doe'}"> <p> الاسم الأخير هو <span ng-bind = "person.lastname"> </p> </p> </viv> </body> </html>نتائج التشغيل:
اسمه دو
صفيف AngularJS
صفائف AngularJS مثل صفائف JavaScript:
رمز المثال:
<! 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 = "points = [1،15،19،2،40]"> <p> القيمة الثالثة هي {{Points [2]}} </p> </viv> </body> </html>نتائج التشغيل:
القيمة الثالثة هي 19
نفس المثال باستخدام NG-bind:
رمز المثال:
<! 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 = "points = [1،15،19،2،40]"> <p> القيمة الثالثة هي <span ng-bind = "points [2]"> </p> </p> </viv> </body> </html>
نتائج التشغيل:
القيمة الثالثة هي 19
تعبيرات AngularJS وتعبيرات JavaScript
على غرار تعبيرات JavaScript ، يمكن أن تحتوي تعبيرات AngularJS على أحرف ومشغلين ومتغيرات.
على عكس تعبيرات JavaScript ، يمكن كتابة تعبيرات AngularJS في HTML.
على عكس تعبيرات JavaScript ، فإن تعبيرات AngularJS لا تدعم الأحكام الشرطية والحلقات والاستثناءات.
على عكس تعبيرات JavaScript ، تدعم تعبيرات AngularJS مرشحات.
ما سبق هو تجميع من مواد التعبير AngularJS. سوف نستمر في إضافتها لاحقًا. آمل أن يساعد في تعلم AngularJs زميل.