快捷導(dǎo)航

詳解AngularJS中的表達式使用

更新時間：2015年06月16日 12:00:12 投稿：goldensun

這篇文章主要介紹了詳解AngularJS中的表達式使用,包括處理數(shù)字和字符串等各種對象的操作,需要的朋友可以參考下

表達式用于應(yīng)用程序數(shù)據(jù)綁定到HTML。表達式都寫在雙括號就像{{表達式}}。表達式中的行為跟ng-bind指令方式相同。 AngularJS應(yīng)用表達式是純javascript表達式，并輸出它們被使用的數(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>

例子

下面的例子將展示上述所有表達式。
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é)果如下：

2015616115757530.png (587×339)

您可能感興趣的文章:

相關(guān)文章

@angular前端項目代碼優(yōu)化之構(gòu)建Api Tree的方法
這篇文章主要介紹了@angular前端項目代碼優(yōu)化之構(gòu)建Api Tree的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
angularjs實現(xiàn)過濾并替換關(guān)鍵字小功能
這篇文章主要為大家詳細(xì)介紹了angularjs實現(xiàn)過濾并替換關(guān)鍵字小功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-09-09
AngularJS 使用ng-repeat報錯 [ngRepeat:dupes]
這篇文章主要介紹了AngularJS 使用ng-repeat報錯 [ngRepeat:dupes] 的相關(guān)資料,需要的朋友可以參考下
2017-01-01
Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output詳解 (上)
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來看看吧。
2017-07-07
深入理解AngularJS中的ng-bind-html指令和$sce服務(wù)
這篇文章給大家詳細(xì)介紹了AngularJS中的ng-bind-html指令和$sce服務(wù)，對大家學(xué)習(xí)AngularJS具有一定參考借鑒價值，有需要都可以參考學(xué)習(xí)。
2016-09-09
Angular5中提取公共組件之radio list的實例代碼
這篇文章主要介紹了Angular5中提取公共組件之radio list的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-07-07
Angular利用trackBy提升性能的方法
這篇文章主要介紹了在Angular中利用trackBy來提升性能的實現(xiàn)方法,需要的朋友可以參考下
2018-01-01
詳解Angular組件之中間人模式
設(shè)計一個組件時，組件應(yīng)該是內(nèi)聚的，應(yīng)該不依賴外部已經(jīng)存在的組件，要實現(xiàn)這種松耦合的組件要使用中間人模式。
2021-05-05
詳解Angular2 關(guān)于*ngFor 嵌套循環(huán)
這篇文章主要介紹了詳解Angular2 關(guān)于*ngFor 嵌套循環(huán)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
模板視圖和AngularJS之間沖突的解決方法
這篇文章主要介紹了模板視圖和AngularJS之間沖突的解決方法,結(jié)合實例形式分析了AngularJS模板視圖沖突的原因并給出了2種解決方法供大家參考使用,需要的朋友可以參考下
2016-11-11