Expression na AngularJS

Previous page Introduction na AngularJS
Next page Module na AngularJS

AngularJS 通过表达式将数据绑定到 HTML。

Expression na AngularJS

AngularJS 表达式可以写在双大括号内：{{ expression }}。

AngularJS 表达式也可以写在指令内：ng-bind="expression"。

AngularJS 会解析表达式，并在写表达式的位置返回结果。

Expression na AngularJS很像 JavaScript 表达式：它们可以包含字面量、运算符和变量。

Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}

هەر سان

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>我的第一个表达式：{{ 5 + 5 }}</p>
</div>
</body>
</html>

Try it yourself

如果移除了 ng-app 指令，HTML 将原样显示表达式，不会对其进行解析：

هەر سان

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div>
  <p>我的第一个表达式：{{ 5 + 5 }}</p>
</div>
</body>
</html>

Try it yourself

您可以在喜欢的任何位置编写表达式，AngularJS 会简单地解析表达式并返回结果。

مثال: اجازه دهید AngularJS مقدار یک ویژگی CSS را تغییر دهد.

برای تغییر رنگ ورودی زیر، مقدار آن را تغییر دهید:

آبی روشن

هەر سان

<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>

Try it yourself

اعداد AngularJS

اعداد AngularJS مانند اعداد JavaScript هستند:

هەر سان

<div ng-app="" ng-init="quantity=1;cost=5">
<p>مجموع مبلغ (دلار): {{ quantity * cost }}</p>
</div>

Try it yourself

استفاده از ng-bind مثال مشابه:

هەر سان

<div ng-app="" ng-init="quantity=1;cost=5">
<p>مجموع مبلغ (دلار): <span ng-bind="quantity * cost"></span></p>
</div>

Try it yourself

استفاده از ng-init به ندرت دیده می‌شود. شما در فصل مربوط به کنترلرها روش بهتری برای инициالایز کردن داده‌ها یاد خواهید گرفت.

رشته‌های AngularJS

رشته‌های AngularJS مانند رشته‌های JavaScript هستند:

هەر سان

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>نام است {{ firstName + " " + lastName }}</p>
</div>

Try it yourself

مثال استفادة از ng-bind به صورت مشابه:

هەر سان

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>نام است <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

Try it yourself

اشیاء AngularJS

اشیاء AngularJS مانند اشیاء JavaScript هستند:

هەر سان

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>نام است {{ person.lastName }}</p>
</div>

Try it yourself

مثال استفادة از ng-bind به صورت مشابه:

هەر سان

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>نام است <span ng-bind="person.lastName"></span></p>
</div>

Try it yourself

آرایه‌های AngularJS

آرایه‌های AngularJS مانند آرایه‌های JavaScript هستند:

هەر سان

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>نتیجه سوم است {{ points[2] }}</p>
</div>

Try it yourself

مثال استفادة از 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>

Try it yourself