AngularJS入門教程之AngularJS表達式

更新時間：2016年04月18日 11:55:21 投稿：mrr

AngularJS應(yīng)用表達式是純javascript表達式，并輸出它們被使用的數(shù)據(jù)在那里。本文給大家介紹AngularJS入門教程之AngularJS表達式，對angularjs表達式相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧

表達式用于應(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" //相當(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表達式的相關(guān)介紹，希望對大家有所幫助！

您可能感興趣的文章:

相關(guān)文章

關(guān)于angular引入ng-zorro的問題淺析
這篇文章主要給大家介紹了關(guān)于angular引入ng-zorro的問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09
詳談Angular 2+ 的表單（一）之模板驅(qū)動型表單
這篇文章主要介紹了Angular 2+ 的表單（一）之模板驅(qū)動型表單,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-04-04
angular實現(xiàn)IM聊天圖片發(fā)送實例
本篇文章主要介紹了angular實現(xiàn)IM聊天圖片發(fā)送實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機制)
本篇文章主要介紹了淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機制)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
詳解AngularJS中的作用域
這篇文章主要介紹了詳解AngularJS中的作用域,是AngularJS學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
2015-06-06
AngularJS中使用three.js的實例詳解
這篇文章主要介紹了AngularJS中使用three.js的實例詳解，我將之前自己做的demo放到了angularJS的一個component中，其實一開始是沒有準(zhǔn)備用框架的但是后面發(fā)現(xiàn)需要進行的雙向綁定越來越多，后期表單數(shù)據(jù)的變化量也很大，最后還是選擇用NG來做這些事情
2017-07-07
簡單談?wù)剅equire模塊化jquery和angular的問題
下面小編就為大家?guī)硪黄唵握務(wù)剅equire模塊化jquery和angular的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
Angularjs過濾器實現(xiàn)動態(tài)搜索與排序功能示例
這篇文章主要介紹了Angularjs過濾器實現(xiàn)動態(tài)搜索與排序功能,涉及AngularJS過濾器相關(guān)搜索、查詢、排序操作技巧,需要的朋友可以參考下
2017-12-12
Angular2使用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