快捷導(dǎo)航

AngularJS表達(dá)式講解及示例代碼

更新時(shí)間：2016年08月16日 16:13:24 投稿：lqh

本文主要講解AngularJS表達(dá)式,這里整理了相關(guān)資料和提供示例代碼以及實(shí)現(xiàn)效果圖，有需要的小伙伴可以參考下

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

使用數(shù)字

Expense on Books : {{cost * quantity}} Rs

使用字符串

Hello {{student.firstname + " " + student.lastname}}!

使用對(duì)象

Roll No: {{student.rollno}}

使用數(shù)組

Marks(Math): {{marks[3]}}

例子

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

以上就是對(duì)AngularJS 表達(dá)式的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

AngularJS實(shí)現(xiàn)標(biāo)簽頁的兩種方式
這篇文章分別給大家介紹了AngularJS實(shí)現(xiàn)標(biāo)簽頁的兩種方式，一種是通過普通指令實(shí)現(xiàn)標(biāo)簽頁，另外一種是通過自定義指令實(shí)現(xiàn)的標(biāo)簽頁，有需要的朋友們可以來參考借鑒，下面來一起看看吧。
2016-09-09
詳解如何構(gòu)建一個(gè)Angular6的第三方npm包
這篇文章主要介紹了詳解如何構(gòu)建一個(gè)Angular6的第三方npm包,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
Angular 4依賴注入學(xué)習(xí)教程之Injectable裝飾器（六）
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之Injectable裝飾器的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。
2017-06-06
AngularJS模塊學(xué)習(xí)之Anchor Scroll
這篇文章主要介紹了AngularJS模塊學(xué)習(xí)之Anchor Scroll 的相關(guān)資料,需要的朋友可以參考下
2016-01-01
Angularjs中$http以post請(qǐng)求通過消息體傳遞參數(shù)的實(shí)現(xiàn)方法
這篇文章主要介紹了Angularjs中$http以post請(qǐng)求通過消息體傳遞參數(shù)的方法,結(jié)合實(shí)例形式分析了$http使用post請(qǐng)求傳遞參數(shù)的相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下
2016-08-08
AngularJS實(shí)現(xiàn)表單驗(yàn)證
客戶端表單驗(yàn)證是AngularJS里面最酷的功能之一。 AngularJS表單驗(yàn)證可以讓你從一開始就寫出一個(gè)具有交互性和可相應(yīng)的現(xiàn)代HTML5表單。在AngularJS中，有許多表單驗(yàn)證指令。在這里，我們將談?wù)剮讉€(gè)最流行指令，然后我們將討論如何編寫自定義的驗(yàn)證。
2015-01-01
angularjs中的e2e測(cè)試實(shí)例
這篇文章主要介紹了angularjs中的e2e測(cè)試實(shí)例,本文使用Protractor來完成e2e測(cè)試,需要的朋友可以參考下
2014-12-12
Angular 數(shù)據(jù)請(qǐng)求的實(shí)現(xiàn)方法
本篇文章主要介紹了Angular 數(shù)據(jù)請(qǐng)求的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
Angular客戶端請(qǐng)求Rest服務(wù)跨域問題的解決方法
本篇文章主要介紹了Angular客戶端請(qǐng)求Rest服務(wù)跨域問題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
angular 實(shí)現(xiàn)同步驗(yàn)證器跨字段驗(yàn)證的方法
幾乎每個(gè)web應(yīng)用都會(huì)用到表單，那么驗(yàn)證器就是必不可少的東西，這篇文章主要介紹了angular 實(shí)現(xiàn)同步驗(yàn)證器跨字段驗(yàn)證的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-04-04