AngularJS 表达式

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

AngularJS 表达式

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

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

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

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>

亲自试一试

如果移除了 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>

亲自试一试

您可以在喜欢的任何位置编写表达式，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>总金额（美元）：{{ quantity * cost }}</p>

</div>

亲自试一试

使用 ng-bind 的相同例子：

实例

<div ng-app="" ng-init="quantity=1;cost=5">

<p>总金额（美元）：<span ng-bind="quantity * cost"></span></p>

</div>

亲自试一试

使用 ng-init 并不常见。您将在关于控制器的章节中学习初始化数据的更好方法。

AngularJS 字符串

AngularJS 字符串就像 JavaScript 字符串：

实例

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">

<p>名字是 {{ firstName + " " + lastName }}</p>

</div>

亲自试一试

使用 ng-bind 的相同示例：

实例

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">

<p>名字是 <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

亲自试一试

AngularJS 对象

AngularJS 对象就像 JavaScript 对象：

实例

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">

<p>名字是 {{ person.lastName }}</p>

</div>

亲自试一试

使用 ng-bind 的相同示例：

实例

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">

<p>名字是 <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>

亲自试一试