AngularJS Expressions
AngularJS 使用表示式將資料繫結到 HTML。
AngularJS Expressions
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>我的第一個表示式:{{ 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>我的第一個表示式:{{ 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 數字類似
使用 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='John';lastName='Doe'">
<p>姓名是 {{ firstName + " " + lastName }}</p>
</div>
自己動手試一試 »
使用 ng-bind
的相同示例
示例
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名是 <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
自己動手試一試 »
AngularJS 物件
AngularJS 物件與 JavaScript 物件類似
示例
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓是 {{ person.lastName }}</p>
</div>
自己動手試一試 »
使用 ng-bind
的相同示例
示例
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓是 <span ng-bind="person.lastName"></span></p>
</div>
自己動手試一試 »
AngularJS 陣列
AngularJS 陣列與 JavaScript 陣列類似
使用 ng-bind
的相同示例
示例
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個結果是 <span ng-bind="points[2]"></span></p>
</div>
自己動手試一試 »
AngularJS 表示式與 JavaScript 表示式
與 JavaScript 表示式一樣,AngularJS 表示式可以包含文字、運算子和變數。
與 JavaScript 表示式不同,AngularJS 表示式可以寫在 HTML 內部。
AngularJS 表示式不支援條件語句、迴圈和異常,而 JavaScript 表示式支援。
AngularJS 表示式支援過濾器,而 JavaScript 表示式不支援。
在我們的JavaScript 教程中瞭解 JavaScript。