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