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解析二維碼的三種方式，二維碼就是將我們能看懂的文字語言,以機(jī)器語言的形式存儲(chǔ)了起來。其中黑色小方塊代表的是1,白色小方塊代表的是0，黑白相間的圖案其實(shí)就是一串編碼,掃碼的過程就是翻譯這些編碼的過程,需要的朋友可以參考一下2021-11-11
原型和原型鏈 prototype和proto的區(qū)別詳情
原型是function對(duì)象下的屬性，它定義了構(gòu)造函數(shù)的共同祖先，也就是一個(gè)父子級(jí)的關(guān)系,子對(duì)象會(huì)繼承父對(duì)象的方法和屬性,每個(gè)實(shí)例對(duì)象下都有__proto__屬性，通過屬性__proto__指向構(gòu)造函數(shù)的原型對(duì)象,當(dāng)?shù)竭_(dá)末端時(shí)，返回null,這樣一層一層向頂端查找，就形成了原型鏈2021-10-10
tree?shaking對(duì)打包體積優(yōu)化及作用
這篇文章主要為大家介紹了tree?shaking對(duì)打包體積優(yōu)化及作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
幫你提高開發(fā)效率的JavaScript20個(gè)技巧
JavaScript確實(shí)是一門很好的開發(fā)語言。對(duì)于給定的問題，可以有不止一種方法來達(dá)到相同的解決方案。在這篇文章中，我們將討論最快速的方法2021-06-06
JavaScript中塊級(jí)作用域與函數(shù)作用域深入剖析
這篇文章主要為大家介紹了JavaScript中塊級(jí)作用域與函數(shù)作用域的實(shí)現(xiàn)原理深入剖析，2023-05-05
這篇文章主要為大家介紹了JS面試之異步模擬超時(shí)重傳機(jī)制詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了微信小程序 傳值取值的幾種方法總結(jié)的相關(guān)資料,這里對(duì)這幾種方法進(jìn)行了詳解，并附示例代碼，需要的朋友可以參考下2017-01-01
微信公眾號(hào) 客服接口的開發(fā)實(shí)例詳解
這篇文章主要介紹了微信公眾號(hào) 客服接口的開發(fā)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
超越Node.js的JavaScript運(yùn)行環(huán)境Bun.js功能特性詳解
這篇文章主要為大家介紹了超越Node.js的JavaScript運(yùn)行環(huán)境Bun.js功能特性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09
微信小程序 wx.request方法的異步封裝實(shí)例詳解
這篇文章主要介紹了微信小程序 wx.request方法的異步封裝實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05