تعبيرات AngularJS
AngularJS يربط البيانات بـ HTML باستخدام التعبيرات .
تعبيرات AngularJS
يمكن كتابة تعبيرات AngularJS داخل أقواس مزدوجة :.{{ expression }}
يمكن أيضًا كتابة تعبيرات AngularJS داخل توجيه :.ng-bind="expression"
AngularJS سيحل التعبير ، ويعيد النتيجة بالضبط حيث يتم كتابة التعبير.
تشبه تعبيرات AngularJS إلى حد كبير تعبيرات JavaScript: يمكن أن تحتوي على حرفية وعوامل تشغيل ومتغيرات.
مثال {{5 + 5}} أو {{firstName + "" + lastName}}
مثال
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
إذا قمت بإزالة ng-appالتوجيه ، فسيعرض HTML التعبير كما هو ، دون حله:
مثال
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
يمكنك كتابة التعبيرات في أي مكان تريده ، سيقوم AngularJS ببساطة بحل التعبير وإرجاع النتيجة.
مثال: دع AngularJS يغير قيمة خصائص CSS.
قم بتغيير لون مربع الإدخال أدناه ، عن طريق تغيير قيمته:
مثال
<div ng-app="" ng-init="myCol='lightblue'">
<input
style="background-color:{{myCol}}" ng-model="myCol">
</div>
أرقام AngularJS
أرقام AngularJS تشبه أرقام JavaScript:
مثال
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
نفس المثال باستخدام ng-bind:
مثال
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
الاستخدام ng-initليس شائعًا جدًا. سوف تتعلم طريقة أفضل لتهيئة البيانات في الفصل الخاص بوحدات التحكم.
سلاسل AngularJS
سلاسل AngularJS تشبه سلاسل JavaScript:
مثال
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
نفس المثال باستخدام ng-bind:
مثال
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
كائنات AngularJS
كائنات AngularJS تشبه كائنات JavaScript:
مثال
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
نفس المثال باستخدام ng-bind:
مثال
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
صفيفات AngularJS
مصفوفات AngularJS تشبه مصفوفات JavaScript:
مثال
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
نفس المثال باستخدام ng-bind:
مثال
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
تعبيرات AngularJS مقابل تعبيرات JavaScript
مثل تعبيرات JavaScript ، يمكن أن تحتوي تعبيرات AngularJS على قيم حرفية وعوامل تشغيل ومتغيرات.
على عكس تعبيرات JavaScript ، يمكن كتابة تعبيرات AngularJS داخل HTML.
لا تدعم تعبيرات AngularJS الشرطية والحلقات والاستثناءات ، بينما تدعم تعبيرات JavaScript.
تدعم تعبيرات AngularJS عوامل التصفية ، بينما لا تدعم تعبيرات JavaScript.
تعرف على JavaScript في برنامج JavaScript التعليمي .