AngularJS指令詳解及範例程式碼

AngularJS指令詳解及範例程式碼_AngularJS

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

AngularJS指令用於擴充HTML。這些都是先從ng- 首碼的特殊屬性。我們將討論以下指令：

ng-app - 該指令啟動一個AngularJS應用。

ng-init - 該指令初始化應用程式資料。

ng-model - 此指令定義的模型，該模型是變數在AngularJS使用。

ng-repeat - 該指令將重複集合中的每個項目的HTML元素。

ng-app指令

ng-app 指令啟動一個AngularJS應用。它定義根項目。它會自動初始化或啟動載入包含AngularJS應用程式的Web頁面的應用程式。它也被用來載入各種AngularJS模組AngularJS應用。在下面的例子中，我們定義預設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>

例子

下面的例子將展示上述所有指令。

testAngularJS.html

<html><title>AngularJS Directives</title><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><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script></body></html>

輸出

在Web瀏覽器開啟textAngularJS.html。輸入姓名並看到以下結果。

以上就是AngularJS指令的基礎資料，後續繼續補充相關資料，謝謝大家對本站的支援！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More