AngularJS入門教程之AngularJS表達式
表達式用于應(yīng)用程序數(shù)據(jù)綁定到HTML。表達式都寫在雙括號就像{{表達式}}。表達式中的行為跟ng-bind指令方式相同。 AngularJS應(yīng)用表達式是純javascript表達式,并輸出它們被使用的數(shù)據(jù)在那里。
AngularJS表達式格式 : {{expression }}
AngularJS表達式可以是字符串、數(shù)字、運算符和變量
數(shù)字運算{{1 + 5}}
字符串連接{{ 'abc' + 'bcd' }}
變量運算 {{ 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" //相當于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相當于指定了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表達式的相關(guān)介紹,希望對大家有所幫助!
- AngularJS解決ng界面長表達式(ui-set)的方法分析
- Angularjs手動解析表達式($parse)
- AngularJS 表達式詳解及實例代碼
- AngularJS表達式講解及示例代碼
- AngularJS 表達式詳細講解及實例代碼
- 詳解JavaScript的AngularJS框架中的表達式與指令
- 詳解AngularJS中的表達式使用
- AngularJS基礎(chǔ)學習筆記之表達式
- AngularJS實現(xiàn)DOM元素的顯示與隱藏功能
- AngularJS中實現(xiàn)顯示或隱藏動畫效果的方式總結(jié)
- AngularJS實現(xiàn)元素顯示和隱藏的幾個案例
- AngularJS打開頁面隱藏顯示表達式用法示例
相關(guān)文章
關(guān)于angular引入ng-zorro的問題淺析
這篇文章主要給大家介紹了關(guān)于angular引入ng-zorro的問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-09-09詳談Angular 2+ 的表單(一)之模板驅(qū)動型表單
這篇文章主要介紹了Angular 2+ 的表單(一)之模板驅(qū)動型表單,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-04-04淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機制)
本篇文章主要介紹了淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機制),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12簡單談?wù)剅equire模塊化jquery和angular的問題
下面小編就為大家?guī)硪黄唵握務(wù)剅equire模塊化jquery和angular的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06Angularjs過濾器實現(xiàn)動態(tài)搜索與排序功能示例
這篇文章主要介紹了Angularjs過濾器實現(xiàn)動態(tài)搜索與排序功能,涉及AngularJS過濾器相關(guān)搜索、查詢、排序操作技巧,需要的朋友可以參考下2017-12-12Angular2使用Guard和Resolve進行驗證和權(quán)限控制
本篇文章主要介紹了Angular2使用Guard和Resolve進行驗證和權(quán)限控制,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04詳解JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定
這篇文章主要介紹了JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定,包括作用域的繼承以及數(shù)據(jù)的單向和雙向綁定等重要知識點,需要的朋友可以參考下2016-03-03