AngularJS 表達式詳細講解及實例代碼
AngularJS 表達式
AngularJS 使用 表達式 把數(shù)據(jù)綁定到 HTML。
AngularJS 表達式寫在雙大括號內(nèi)： {{ expression }} 。
AngularJS 表達式把數(shù)據(jù)綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達式書寫的位置"輸出"數(shù)據(jù)。
AngularJS 表達式 很像 JavaScript 表達式：它們可以包含文字、運算符和變量。
實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
實例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app>
<p>我的第一個表達式: {{ 5 + 5 }}</p>
</div>
</body>
</html>
運行結(jié)果：
我的第一個表達式: 10
AngularJS 數(shù)字
AngularJS 數(shù)字就像 JavaScript 數(shù)字：
實例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價: {{ quantity * cost }}</p>
</div>
</body>
</html>
運行結(jié)果：
總價：5
使用 ng-bind 的相同實例：
實例代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="quantity=1;cost=5"> <p>總價: <span ng-bind="quantity * cost"></span></p> </div> </body> </html>
運行結(jié)果：
總價：5
注意：使用 ng-init 不是很常見。您將在控制器一章中學(xué)習(xí)到一個更好的初始化數(shù)據(jù)的方式。
AngularJS 字符串
AngularJS 字符串就像 JavaScript 字符串：
實例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名: {{ firstName + " " + lastName }}</p>
</div>
</body>
</html>
運行結(jié)果：
姓名：John Doe
使用 ng-bind 的相同實例：
實例代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p> </div> </body> </html>
運行結(jié)果：
姓名：John Doe
AngularJS 對象
AngularJS 對象就像 JavaScript 對象：
實例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓為 {{ person.lastName }}</p>
</div>
</body>
</html>
運行結(jié)果：
姓名為 Doe
使用 ng-bind 的相同實例：
實例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓為 <span ng-bind="person.lastName"></span></p>
</div>
</body>
</html>
運行結(jié)果：
姓名為 Doe
AngularJS 數(shù)組
AngularJS 數(shù)組就像 JavaScript 數(shù)組：
實例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個值為 {{ points[2] }}</p>
</div>
</body>
</html>
運行結(jié)果：
第三個值為 19
使用 ng-bind 的相同實例：
實例代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三個值為 <span ng-bind="points[2]"></span></p> </div> </body> </html>
運行結(jié)果：
第三個值為 19
AngularJS 表達式 與 JavaScript 表達式
類似于 JavaScript 表達式，AngularJS 表達式可以包含字母，操作符，變量。
與 JavaScript 表達式不同，AngularJS 表達式可以寫在 HTML 中。
與 JavaScript 表達式不同，AngularJS 表達式不支持條件判斷，循環(huán)及異常。
與 JavaScript 表達式不同，AngularJS 表達式支持過濾器。
以上就是對AngularJS 表達式資料的整理，后續(xù)繼續(xù)補充，希望能幫助學(xué)習(xí)AngularJS 的同學(xué)。
- AngularJS解決ng界面長表達式(ui-set)的方法分析
- Angularjs手動解析表達式（$parse）
- AngularJS 表達式詳解及實例代碼
- AngularJS表達式講解及示例代碼
- AngularJS入門教程之AngularJS表達式
- 詳解JavaScript的AngularJS框架中的表達式與指令
- 詳解AngularJS中的表達式使用
- AngularJS基礎(chǔ)學(xué)習(xí)筆記之表達式
- AngularJS實現(xiàn)DOM元素的顯示與隱藏功能
- AngularJS中實現(xiàn)顯示或隱藏動畫效果的方式總結(jié)
- AngularJS實現(xiàn)元素顯示和隱藏的幾個案例
- AngularJS打開頁面隱藏顯示表達式用法示例
相關(guān)文章
這篇文章主要為大家介紹了JavaScript對象管家Proxy使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
js?交互在Flutter?中使用?webview_flutter
這篇文章主要為大家介紹了js?交互在Flutter?中使用?webview_flutter示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了微信小程序 搖一搖抽獎簡單實例實現(xiàn)代碼的相關(guān)資料,這里實現(xiàn)搖一搖抽獎的功能，需要的朋友可以參考下2017-01-01
ant-design的upload組件中實現(xiàn)粘貼上傳實例詳解
這篇文章主要為大家介紹了ant-design的upload組件中實現(xiàn)粘貼上傳實例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了微信小程序template模板使用的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這樣的功能，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了微信小程序 高德地圖詳解及簡單實例（源碼下載）的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了Web項目如何配置Eslint過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要介紹了JavaScript文檔對象模型DOM，當(dāng)網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型，通過可編程的對象模型，JavaScript 獲得了足夠的能力來創(chuàng)建動態(tài)的 HTML。下面來看看文章得詳細內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要為大家介紹了js中yield參數(shù)應(yīng)用示例深入理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
本文主要講解Google 地圖事件,這里整理了Google地圖基本事件功能，并提供代碼示例以供大家參考，有需要的小伙伴可以參考下2016-08-08