AngularJS入門教程之AngularJS表達(dá)式
表達(dá)式用于應(yīng)用程序數(shù)據(jù)綁定到HTML。表達(dá)式都寫在雙括號就像{{表達(dá)式}}。表達(dá)式中的行為跟ng-bind指令方式相同。 AngularJS應(yīng)用表達(dá)式是純javascript表達(dá)式，并輸出它們被使用的數(shù)據(jù)在那里。
AngularJS表達(dá)式格式 : {{expression }}
AngularJS表達(dá)式可以是字符串、數(shù)字、運(yùn)算符和變量
數(shù)字運(yùn)算{{1 + 5}}
字符串連接{{ 'abc' + 'bcd' }}
變量運(yùn)算 {{ firstName + " " + lastName }}， {{ quantity * cost }}
對象{{ person.lastName }}
數(shù)組{{ points[2] }}
AngularJS例子
1.Angularjs數(shù)字
<div ng-app="" ng-init="quantity=2;cost=5">
<p>總價： {{ quantity * cost }}</p>
</div>
上例輸出：
總價：10
代碼注釋：
ng-init="quantity=2;cost=5" //相當(dāng)于javascript里的var quantity=2,cost=5;
使用ng-bind可以實現(xiàn)相同的功能
<div ng-app="" ng-init="quantity=1;cost=5"> <p>總價： <span ng-bind="quantity * cost"></span></p> //這里的ng-bind相當(dāng)于指定了span的innerHTML </div>
2.Angularjs字符串
<div ng-app="" ng-init="firstName='John';lastName='Snow'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div>
輸出
姓名：Jone Snow
3. AngularJS對象
<div ng-app="" ng-init="person={firstName:'John',lastName:'Snow'}">
<p>姓為 {{ person.lastName }}</p>
</div>
輸出
姓為 Snow
4.AngularJS數(shù)組
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個值為 {{ points[2] }}</p>
</div>
輸出
第三個值為 19
以上所述是小編給大家介紹的AngularJS入門教程之AngularJS表達(dá)式的相關(guān)介紹，希望對大家有所幫助！
- AngularJS解決ng界面長表達(dá)式(ui-set)的方法分析
- Angularjs手動解析表達(dá)式（$parse）
- AngularJS 表達(dá)式詳解及實例代碼
- AngularJS表達(dá)式講解及示例代碼
- AngularJS 表達(dá)式詳細(xì)講解及實例代碼
- 詳解JavaScript的AngularJS框架中的表達(dá)式與指令
- 詳解AngularJS中的表達(dá)式使用
- AngularJS基礎(chǔ)學(xué)習(xí)筆記之表達(dá)式
- AngularJS實現(xiàn)DOM元素的顯示與隱藏功能
- AngularJS中實現(xiàn)顯示或隱藏動畫效果的方式總結(jié)
- AngularJS實現(xiàn)元素顯示和隱藏的幾個案例
- AngularJS打開頁面隱藏顯示表達(dá)式用法示例
相關(guān)文章
詳解Angular.js數(shù)據(jù)綁定時自動轉(zhuǎn)義html標(biāo)簽及內(nèi)容
本篇文章主要介紹了詳解Angular.js數(shù)據(jù)綁定時自動轉(zhuǎn)義html標(biāo)簽及內(nèi)容 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
在我們開發(fā)中經(jīng)常需要在頁面顯示給用戶的信息需要一定處理格式化，才能顯示給用戶。在angularjs中為我們提供了叫filter的指令，讓我們能夠很輕易就能做到著一些列的功能，angularjs內(nèi)部為我們提供了number等很多內(nèi)置的filter。2015-05-05
AngularJS基礎(chǔ) ng-dblclick 指令用法
本文主要介紹AngularJS ng-dblclick 指令,這里對ng-dblclick基礎(chǔ)資料整理并詳細(xì)介紹,簡單的代碼實例和實現(xiàn)效果,希望能幫助學(xué)習(xí)AngularJS的朋友2016-08-08
動態(tài)創(chuàng)建Angular組件實現(xiàn)popup彈窗功能
這篇文章主要介紹了動態(tài)創(chuàng)建angular組件實現(xiàn)popup彈窗,需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細(xì)介紹了AngularJS Phonecat實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
AngularJS使用自定義指令替代ng-repeat的方法
這篇文章主要介紹了另一種即具有與ng-repeat一樣處理大量數(shù)據(jù)的綁定的功能，又具有超高性能的自定義方法，有需要的小伙伴們可以參考借鑒，下面來一起看看吧。2016-09-09
本篇文章主要介紹了AngularJS實現(xiàn)頁面定時刷新，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
AngularJs用戶輸入動態(tài)模板XSS攻擊示例詳解
這篇文章主要給大家介紹了關(guān)于AngularJs用戶輸入動態(tài)模板XSS攻擊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
Angular4綁定html內(nèi)容出現(xiàn)警告的處理方法
這篇文章主要給大家介紹了關(guān)于Angular4綁定html內(nèi)容出現(xiàn)警告的處理方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
這篇文章主要介紹了angular 實現(xiàn)下拉列表組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03