AngularJS教程二——內部指令
轉載自:易百教程
AngularJS指令用於擴充套件HTML。這些都是先從ng- 字首的特殊屬性。
- ng-app - 該指令啟動一個AngularJS應用。
- ng-init - 該指令初始化應用程式資料。
- ng-model - 此指令定義的模型,該模型是變數在AngularJS使用。
- ng-repeat - 該指令將重複集合中的每個專案的HTML元素。
ng-app指令
ng-app 指令啟動一個AngularJS應用,它定義根元素。它會自動初始化或啟動載入包含AngularJS應用程式的Web頁面。
在下面的例子中,我們定義預設AngularJS應用使用div元素的ng-app 屬性。
<div ng-app="">
...
</div>
ng-init 指令
ng-init 指令初始化一個AngularJS應用程式的資料。它被用來把值在應用程式中使用的變數。
在下面的例子中,我們將初始化countries陣列。使用JSON語法來定義countries
陣列。
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
...
</div>
ng-model指令
ng-model指令定義在AngularJS應用中使用的模型/變數。
在下面的例子中,我們定義了一個名為name
的模型。
<div ng-app="">
...
<p>Enter your Name: <input type="text" ng-model="name"></p>
</div>
ng-repeat 指令
ng-repeat 指令重複html元素集合中的每個專案。
在下面的例子中,我們已經迭代了陣列countries
。
<div ng-app="">
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
下面的例子將展示上述所有指令。
<!DOCTYPE html>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<script id="others_angular_103" type="text/javascript" class="library" src="/js/sandbox/other/angular.min.js"></script>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
<p>Enter your Name:
<input type="text" ng-model="name">
</p>
<p>Hello <span ng-bind="name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
</body>
</html>
相關文章
- AngularJS教程十五—— 部門樹AngularJS
- AngularJS 指令實踐指南(二)AngularJS
- AngularJS教程二十三—— 通用下拉指令AngularJS
- AngularJS教程二十—— 內建服務AngularJS
- AngularJS教程二十五—— 模態窗指令AngularJS
- 指令<AngularJs>AngularJS
- AngularJS教程十四—— 使用者所屬部門AngularJS
- Redo內部解析(二)
- AngularJS教程AngularJS
- AngularJS 4(三)【指令】AngularJS
- angularJS 系列(七)---指令AngularJS
- AngularJS 指令實踐AngularJS
- AngularJS - 自定義指令AngularJS
- 走進AngularJs(二) ng模板中常用指令的使用方式AngularJS
- 夜息seo培訓內部教程
- AngularJS 指令實現原理AngularJS
- angularjs之$timeout指令AngularJS
- 國內第一個完整犀利的AngularJS視訊教程AngularJS
- ?HealthKit開發快速入門教程大學霸內部教程
- angularJs入門教程AngularJS
- java培訓教程:什麼是匿名內部類?怎樣建立匿名內部類?Java
- 研發內部控制淺談(二)(轉)
- Angularjs學習筆記指令AngularJS筆記
- 學習AngularJs:Directive指令用法AngularJS
- AngularJS 指令實踐指南(一)AngularJS
- Mysql 5.7 Gtid內部學習(二) Gtid相關內部資料結構MySql資料結構
- AngularJS教程三——表示式AngularJS
- AngularJS教程五—— 服務AngularJS
- AngularJS教程七—— 框架概述AngularJS框架
- AngularJS教程八—— 表格DataTablesAngularJS
- java內部類,區域性內部類,靜態內部類,匿名內部類Java
- NGUI全面實踐教程(大學霸內部資料)NGUI
- AngularJS 的常用特性(二)AngularJS
- java之內部類(InnerClass)----非靜態內部類、靜態內部類、區域性內部類、匿名內部類Java
- AngularJS(二、如何用AngularJS建立前端程式碼框架)AngularJS前端框架
- 10-Java內部類——成員內部類、區域性內部類、匿名內部類Java
- java內部類之成員內部類之匿名內部類Java
- Mysql架構與內部模組-第二章MySql架構