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>總價(jià): {{ quantity * cost }}</p> </div>
上例輸出:
總價(jià):10
代碼注釋:
ng-init="quantity=2;cost=5" //相當(dāng)于javascript里的var quantity=2,cost=5;
使用ng-bind可以實(shí)現(xiàn)相同的功能
<div ng-app="" ng-init="quantity=1;cost=5"> <p>總價(jià): <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>第三個(gè)值為 {{ points[2] }}</p> </div>
輸出
第三個(gè)值為 19
以上所述是小編給大家介紹的AngularJS入門教程之AngularJS表達(dá)式的相關(guān)介紹,希望對大家有所幫助!
- AngularJS解決ng界面長表達(dá)式(ui-set)的方法分析
- Angularjs手動解析表達(dá)式($parse)
- AngularJS 表達(dá)式詳解及實(shí)例代碼
- AngularJS表達(dá)式講解及示例代碼
- AngularJS 表達(dá)式詳細(xì)講解及實(shí)例代碼
- 詳解JavaScript的AngularJS框架中的表達(dá)式與指令
- 詳解AngularJS中的表達(dá)式使用
- AngularJS基礎(chǔ)學(xué)習(xí)筆記之表達(dá)式
- AngularJS實(shí)現(xiàn)DOM元素的顯示與隱藏功能
- AngularJS中實(shí)現(xiàn)顯示或隱藏動畫效果的方式總結(jié)
- AngularJS實(shí)現(xiàn)元素顯示和隱藏的幾個(gè)案例
- AngularJS打開頁面隱藏顯示表達(dá)式用法示例
相關(guān)文章
關(guān)于angular引入ng-zorro的問題淺析
這篇文章主要給大家介紹了關(guān)于angular引入ng-zorro的問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09詳談Angular 2+ 的表單(一)之模板驅(qū)動型表單
這篇文章主要介紹了Angular 2+ 的表單(一)之模板驅(qū)動型表單,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-04-04angular實(shí)現(xiàn)IM聊天圖片發(fā)送實(shí)例
本篇文章主要介紹了angular實(shí)現(xiàn)IM聊天圖片發(fā)送實(shí)例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制)
本篇文章主要介紹了淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12AngularJS中使用three.js的實(shí)例詳解
這篇文章主要介紹了AngularJS中使用three.js的實(shí)例詳解,我將之前自己做的demo放到了angularJS的一個(gè)component中,其實(shí)一開始是沒有準(zhǔn)備用框架的但是后面發(fā)現(xiàn)需要進(jìn)行的雙向綁定越來越多,后期表單數(shù)據(jù)的變化量也很大,最后還是選擇用NG來做這些事情2017-07-07簡單談?wù)剅equire模塊化jquery和angular的問題
下面小編就為大家?guī)硪黄唵握務(wù)剅equire模塊化jquery和angular的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06Angularjs過濾器實(shí)現(xiàn)動態(tài)搜索與排序功能示例
這篇文章主要介紹了Angularjs過濾器實(shí)現(xiàn)動態(tài)搜索與排序功能,涉及AngularJS過濾器相關(guān)搜索、查詢、排序操作技巧,需要的朋友可以參考下2017-12-12Angular2使用Guard和Resolve進(jìn)行驗(yàn)證和權(quán)限控制
本篇文章主要介紹了Angular2使用Guard和Resolve進(jìn)行驗(yàn)證和權(quán)限控制,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04詳解JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定
這篇文章主要介紹了JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定,包括作用域的繼承以及數(shù)據(jù)的單向和雙向綁定等重要知識點(diǎn),需要的朋友可以參考下2016-03-03