AngularJS:表達式

ylbtech-AngularJS:表達式

?

1.返回頂部
1、

AngularJS?表達式


AngularJS 使用?表達式?把數據綁定到 HTML。


AngularJS 表達式

AngularJS 表達式寫在雙大括號內:{{ expression }}

AngularJS 表達式把數據綁定到 HTML,這與?ng-bind?指令有異曲同工之妙。

AngularJS 將在表達式書寫的位置"輸出"數據。

AngularJS 表達式?很像?JavaScript 表達式:它們可以包含文字、運算符和變量。

實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body><div ng-app=""><p>我的第一個表達式: {{ 5 + 5 }}</p>
</div></body>
</html>

?嘗試一下 ?


AngularJS 數字

AngularJS 數字就像 JavaScript 數字:

AngularJS 實例

<div ng-app="" ng-init="quantity=1;cost=5"><p>總價: {{ quantity * cost }}</p></div>

?嘗試一下 ?

使用 ng-bind 的相同實例:

AngularJS 實例

<div ng-app="" ng-init="quantity=1;cost=5"><p>總價: <span ng-bind="quantity * cost"></span></p></div>

?嘗試一下 ?

Note使用?ng-init?不是很常見。您將在控制器一章中學習到一個更好的初始化數據的方式。

AngularJS 字符串

AngularJS 字符串就像 JavaScript 字符串:

AngularJS 實例

<div ng-app="" ng-init="firstName='John';lastName='Doe'"><p>姓名: {{ firstName + " " + lastName }}</p></div>

?嘗試一下 ?

使用 ng-bind 的相同實例:

AngularJS 實例

<div ng-app="" ng-init="firstName='John';lastName='Doe'"><p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p></div>

?嘗試一下 ?


AngularJS 對象

AngularJS 對象就像 JavaScript 對象:

AngularJS 實例

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>姓為 {{ person.lastName }}</p></div>

?嘗試一下 ?

使用 ng-bind 的相同實例:

AngularJS 實例

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>姓為 <span ng-bind="person.lastName"></span></p></div>

?嘗試一下 ?


AngularJS 數組

AngularJS 數組就像 JavaScript 數組:

AngularJS 實例

<div ng-app="" ng-init="points=[1,15,19,2,40]"><p>第三個值為 {{ points[2] }}</p></div>

?嘗試一下 ?

使用 ng-bind 的相同實例:

AngularJS 實例

<div ng-app="" ng-init="points=[1,15,19,2,40]"><p>第三個值為 <span ng-bind="points[2]"></span></p></div>

?嘗試一下 ?


AngularJS 表達式 與 JavaScript 表達式

類似于 JavaScript 表達式,AngularJS 表達式可以包含字母,操作符,變量

與 JavaScript 表達式不同,AngularJS 表達式可以寫在 HTML 中

與 JavaScript 表達式不同,AngularJS 表達式不支持條件判斷,循環及異常

與 JavaScript 表達式不同,AngularJS 表達式支持過濾器

2、
2.返回頂部
3.返回頂部
4.返回頂部
5.返回頂部
1、
http://www.runoob.com/angularjs/angularjs-expressions.html
2、?
6.返回頂部
warn作者:ylbtech
出處:http://ylbtech.cnblogs.com/
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。

轉載于:https://www.cnblogs.com/storebook/p/8542584.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/250846.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/250846.shtml
英文地址,請注明出處:http://en.pswp.cn/news/250846.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

23 Refs的應用場景與選用思考

Refs含義 允許訪問真實DOMReact數據流&#xff1a;通過props來實現父子組件的交互Refs允許強制修改子組件 // 1. 構造器離添加實例屬性 this.ref React.createRef() // 2. 組件上綁定ref ref{this.ref} // 3. 使用&#xff1a;this.ref.currentinput class MyInput extends…

flutter --- Windows下環境配置

https://flutter.liulongbin.top/ https://www.cnblogs.com/zxsh/archive/2018/04/16/8859048.html

省選模擬賽記錄(越往下越新哦~~~)

LOG 模擬賽第一次見尼瑪這么給數據范圍的……開考有點困,迷迷糊糊看完了三道題,真的是像老呂說的那樣,一道都不會……思考T1,感覺有點感覺,但是太困了,就先碼了暴力,發現打表可以50分,于是就大力打了一波表……轉身T3,碼出25分的O(n^2)算法,然后不會了……去了T2,碼出35分的O(n…

MFC-CString與int互相轉化

1. CString轉int int n 0; CString str _T("123");n _ttoi(str); 2. int轉CString int n 0; CString str; str.Format(_T(%d) , n); 參考&#xff1a;MFC中 CString與int的轉化 vs2010 中 MFC::CString 如何和int相互轉化 轉載于:https://www.cnblogs.com/Tang-…

flutter --- 使用dio包

打開pubspec.yaml找到dependencies在最下面添加 dio: ^1.0.9ctrl s 之后,會自動下載依賴 使用: // get請求 import package:dio/dio.dart; Dio dio new Dio(); var response await dio.get("/test", data:{"id":12, "name":"marron&qu…

24 React.createRef()用法細節分析

通過React.createRef → ref對象通過元素的ref屬性可以附加到React元素上一般通過構造器中給this的屬性賦值一個ref&#xff0c;方便整個組件使用ref只要傳遞到react元素中&#xff0c;就可以利用ref的current屬性訪問到該真實DOM節點ref在componentDidMount和componentDidUpda…

對于下一代互聯網的暢想

去中心化 每臺客戶機都將成為服務器, 爭取對資源的充分利用 顯示屏化 運算功能交給云服務器, 每臺客戶機的主要任務是顯示 交互 聯網而不是進行運算, 爭取對資源的盡可能節省 優點 可以大大降低客戶機的成本, 減少資源的浪費, 而且使客戶機之間的區別變得更小(因為都主要負責顯…

npm install mysql --save-dev

npm install X: 會把X包安裝到node_modules目錄中不會修改package.json之后運行npm install命令時&#xff0c;不會自動安裝Xnpm install X –save: 會把X包安裝到node_modules目錄中 會在package.json的dependencies屬性下添加X 之后運行npm install命令時&#xff0c;會自動…

dart --- 環境配置

1.進入官網下載SDK http://www.gekorm.com/dart-windows/ 2.運行下載的EXE文件.下一步下一步… 3.打開小黑框,輸入: dart --version VSCode關于Dart的插件: DartCode Runner 插件安裝好后,需重啟VSCode. 新建 index.dart,輸入以下代碼 main () {print("Hello Dart…

Shiro 登錄、退出、校驗是否登錄涉及到的Session和Cookie

前提 我們的使用的是DefaultWebSessionManager而不是ServletContainerSessionManager。這就意味著前者的session為Shiro的&#xff0c;后者的session為Tomcat的。 登錄 DefaultWebSessionManager調用start()方法(在AbstractNativeSessionManager中)創建Session&#xff08;Simp…

25 Refs轉發機制與在高階組件中的使用

將子節點的ref暴露給父節點 16.3以上 Refs轉發&#xff0c;將ref自動通過組件傳遞給子組件 1. 在父組件創建ref對象 2. 給子組件賦值ref 3. 通過React.forward向子組件轉發ref屬性 4. 父組件的ref對象指向子組件dom 5. ref參數只有在 React.forwardRef 組件內定義時可接受con…

26 JSX深度剖析與使用技巧

React對JSX的處理 React.createElement有三個參數&#xff1a;標簽類型&#xff0c;屬性集合&#xff0c;子元素 JSX其實是React.createElement函數調用的語法糖 JSX → 編譯 → React.createElement調用形式 class App extends React.Component {render() {return (<div cl…

javascript --- 數組實用小技巧

一個數組:[a,b,c,d,e],希望滿足以下2個條件: 1.當索引在第0個位置的時候,數組為[b,c,d,e],在第1個位置的時候,數組為[a,c,d,e] … 2.若索引i 和 索引 j 的值相等,則只執行1次. 效果如下: nums [1,2,3,4] nums [1,1,1,2,2,3,4] 實現如下: let nums [1,1,1,2,2,3,4]; let le…

Http的持久連接和管線化

【要點】 1. 什么是持久連接&#xff1f; 2. 什么是管線化&#xff1f; 【總結】 1.什么是持久連接&#xff1f; (keep alive模式) HTTP1.1規定了默認保持長連接&#xff08;HTTP persistent connection &#xff0c;也有翻譯為持久連接&#xff09;;數據傳輸完成了保持TCP連接…

Hexo 版本

Mac hexo s 啟動Hexo服務報錯如下&#xff1a; Error: The module /usr/local/lib/node_modules/hexo-cli/node_modules/.0.8.0dtrace-provider/build/Release/DTraceProviderBindings.node was compiled against a different Node.js version using NODE_MODULE_VERSION 48. T…

dart --- 簡單的閉包

首先得明白下面2點: 全局變量的特點:常駐內存,污染全局變量局部變量的特點:會被垃圾回收機制回收,不會污染作用域… // 閉包.dart void main(){myClosure(){var a 0; // a是一個局部變量.函數執行完畢后將被清理return (){a;print(a);};}var fn myClosure();fn();fn();fn()…

27 JSX函數子元素的應用與思考

JSX的props.children和props本身有部分一致的特性 props.children可以傳遞任何類型的子元素 // 調用子元素回調 num 次&#xff0c;來重復生成組件 function Repeat(props) {// 返回一組JSXlet items [];for (let i 0; i < props.num; i) {items.push(props.children(i));…

Python學習day12(生成器,列表/生成器推導式)

Python學習day12(生成器&#xff0c;列表/生成器推導式) 生成器 初始生成器 我們知道的迭代器有兩種&#xff1a;一種是調用方法直接返回的&#xff0c;一種是可迭代對象通過執行iter方法得到的&#xff0c;迭代器有的好處是可以節省內存。 如果在某些情況下&#xff0c;我們也…

Cascader 級聯選擇器

當一個數據集合有清晰的層級結構時&#xff0c;可通過級聯選擇器逐級查看并選擇。 基礎用法 有兩種觸發子菜單的方式 只需為 Cascader 的options屬性指定選項數組即可渲染出一個級聯選擇器。 通過expand-trigger可以定義展開子級菜單的觸發方式。 本例還展示了change事件&#…

es6 --- String.prototype.padStart

從實際出發理解. 首先看下面代碼 // js var dt new Date(); console.log(dt);下面想把時間格式化,寫一個dateFormat函數 // js function dateFormat(data){var dt new Date(data);var y dt.getFullYear();var m dt. getMonth() 1;var d dt.getDate();var hh dt.getHo…