AngularJS表達式講解及示例代碼

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

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

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

使用數(shù)字

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

使用字符串

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

使用對象

Roll No: {{student.rollno}}

使用數(shù)組

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

例子

下面的例子將展示上述所有表達式。

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。看到結(jié)果如下：

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

您可能感興趣的文章:

相關(guān)文章

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