選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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 數字類似

示例

<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='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 陣列類似

示例

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>第三個結果是 {{ points[2] }}</p>

</div>
自己動手試一試 »

使用 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。


×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援