AngularJS يربط البيانات إلى HTML باستخدام التعبير.
AngularJS التعبير
AngularJS التعبيرات يمكن كتابة داخل الأقواس مزدوجة: {{ expression }} .
AngularJS يمكن أيضا تعبيرات تكون مكتوبة داخل التوجيه: ng-bind=" expression " .
سوف AngularJS حل التعبير، وإرجاع النتيجة بالضبط أين هو مكتوب التعبير.
AngularJS التعابير هي مثل الكثير من التعبيرات جافا سكريبت: يمكن أن تحتوي على الحرفية والمشغلين والمتغيرات.
مثال {{5 + 5}} أو {{الاسم الأول + "" + اسم العائلة}}
مثال
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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" value="{{myCol}}">
</div>
انها محاولة لنفسك » أرقام AngularJS
AngularJS الأرقام مثل أرقام جافا سكريبت:
مثال
<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 سلاسل تشبه سلاسل جافا سكريبت:
مثال
<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 الكائنات مثل كائنات جافا سكريبت:
مثال
<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 المصفوفات هي مثل صفائف جافا سكريبت:
مثال
<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 التعبير مقابل جافا سكريبت التعبير
مثل تعبيرات جافا سكريبت، يمكن AngularJS عبارات تحتوي على الحرفية والمشغلين والمتغيرات.
وخلافا للتعبيرات جافا سكريبت، AngularJS التعبيرات يمكن كتابة داخل HTML.
AngularJS عبارات لا تدعم الشرطية، حلقات، والاستثناءات، في حين تفعل تعبيرات جافا سكريبت.
AngularJS تعبيرات دعم المرشحات، في حين تعبيرات جافا سكريبت لا.