AngularJS表達(dá)式講解及示例代碼
表達(dá)式用于應(yīng)用程序數(shù)據(jù)綁定到HTML。表達(dá)式都寫在雙括號就像{{表達(dá)式}}。表達(dá)式中的行為跟ng-bind指令方式相同。 AngularJS應(yīng)用表達(dá)式是純javascript表達(dá)式,并輸出它們被使用的數(shù)據(jù)在那里。
使用數(shù)字
<p>Expense on Books : {{cost * quantity}} Rs</p>
使用字符串
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
使用對象
<p>Roll No: {{student.rollno}}</p>
使用數(shù)組
<p>Marks(Math): {{marks[3]}}</p>
例子
下面的例子將展示上述所有表達(dá)式。
testAngularJS.html 文件代碼如下:
<html> <title>AngularJS Expressions</title> <body> <h1>Sample Application</h1> <div ng-app="" ng-init="quantity=1;cost=30; student={firstname:'Mahesh',lastname:'Parashar',rollno:101};marks=[80,90,75,73,60]"> <p>Hello {{student.firstname + " " + student.lastname}}!</p> <p>Expense on Books : {{cost * quantity}} Rs</p> <p>Roll No: {{student.rollno}}</p> <p>Marks(Math): {{marks[3]}}</p> </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </body> </html>
輸出
在Web瀏覽器打開textAngularJS.html??吹浇Y(jié)果如下:
以上就是對AngularJS 表達(dá)式的資料整理,后續(xù)繼續(xù)補充相關(guān)資料,謝謝大家對本站的支持!
- AngularJS解決ng界面長表達(dá)式(ui-set)的方法分析
- Angularjs手動解析表達(dá)式($parse)
- AngularJS 表達(dá)式詳解及實例代碼
- AngularJS 表達(dá)式詳細(xì)講解及實例代碼
- AngularJS入門教程之AngularJS表達(dá)式
- 詳解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項目中$scope.$apply()方法的使用詳解
這篇文章主要給大家介紹了關(guān)于Angular項目中$scope.$apply()方法使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Angularjs具有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編一起來看看吧。2017-07-07angular6根據(jù)environments配置文件更改開發(fā)所需要的環(huán)境的方法
這篇文章主要介紹了angular6根據(jù)environments配置文件更改開發(fā)所需要的環(huán)境的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03AngularJS基礎(chǔ) ng-cut 指令介紹及簡單示例
本文主要介紹AngularJS ng-cut 指令,這里對ng-cut指令的基礎(chǔ)資料進行了整理,和詳細(xì)介紹,并附上代碼示例和實現(xiàn)效果圖,學(xué)習(xí)AngularJS 指令的朋友可以參考下2016-08-08解決angular的post請求后SpringMVC后臺接收不到參數(shù)值問題的方法
這篇文章主要介紹了解決angular的post請求后SpringMVC后臺接收不到參數(shù)值問題的方法,感興趣的小伙伴們可以參考一下2015-12-12詳解Angular 4.x NgTemplateOutlet
這篇文章主要介紹了詳解Angular 4.x NgTemplateOutlet,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output詳解(下)
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-07-07angularjs實現(xiàn)過濾并替換關(guān)鍵字小功能
這篇文章主要為大家詳細(xì)介紹了angularjs實現(xiàn)過濾并替換關(guān)鍵字小功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09淺談Angularjs link和compile的使用區(qū)別
下面小編就為大家?guī)硪黄獪\談Angularjs link和compile的使用區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10Angular中AuthGuard路由守衛(wèi)的創(chuàng)建使用
這篇文章主要為大家介紹了Angular中AuthGuard路由守衛(wèi)的創(chuàng)建使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07Angular ui-roter 和AngularJS 通過 ocLazyLoad 實現(xiàn)動態(tài)(懶)加載模塊和依賴
這篇文章主要介紹了Angular ui-roter 和AngularJS 通過 ocLazyLoad 實現(xiàn)動態(tài)(懶)加載模塊和依賴,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11