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>

親自試一試