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

表達(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)介紹，希望對大家有所幫助！

您可能感興趣的文章:

相關(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-04
angular實(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-12
詳解AngularJS中的作用域
這篇文章主要介紹了詳解AngularJS中的作用域,是AngularJS學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
2015-06-06
AngularJS中使用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-06
Angularjs過濾器實(shí)現(xiàn)動態(tài)搜索與排序功能示例
這篇文章主要介紹了Angularjs過濾器實(shí)現(xiàn)動態(tài)搜索與排序功能,涉及AngularJS過濾器相關(guān)搜索、查詢、排序操作技巧,需要的朋友可以參考下
2017-12-12
Angular2使用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