整理AngularJS中的一些常用指令
更新時間：2015年06月16日 11:54:56 投稿：goldensun
這篇文章主要介紹了整理AngularJS中的一些常用指令,包括ng-app、ng-init、ng-model和ng-repeat這四個指令的講解,需要的朋友可以參考下
AngularJS指令用于擴展HTML。這些都是先從ng- 前綴的特殊屬性。我們將討論以下指令：
- ng-app - 該指令啟動一個AngularJS應用。
- ng-init - 該指令初始化應用程序數(shù)據(jù)。
- 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應用程序的數(shù)據(jù)。它被用來把值在應用程序中使用的變量。在下面的例子中，我們將初始化countries數(shù)組。使用JSON語法來定義countries數(shù)組。
<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元素集合中的每個項目。在下面的例子中，我們已經(jīng)迭代了數(shù)組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通過過濾器返回超鏈接的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
如何利用@angular/cli V6.0直接開發(fā)PWA應用詳解
這篇文章主要給大家介紹了如何利用@angular/cli V6.0直接開發(fā)PWA應用的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用@angular/cli V6.0具有一定的參考學習價值，需要的朋友可以參考下2018-05-05
本文主要介紹AngularJS ng-list 指令,這里幫大家整理了ng-list指令的基本資料,并附有示例代碼,有需要的小伙伴可以參考下2016-08-08
Angular2 自定義validators的實現(xiàn)方法
angular 當需要form表單需要驗證時，angular自帶了許多校驗器，但是很多時候自帶的無法滿足業(yè)務需求，這時候就需要自定義的校驗器，下面通過本文給大家分享Angular2 自定義validators的實現(xiàn)方法，需要的朋友參考下吧2017-07-07
本篇文章主要介紹了angular 基于ng-messages的表單驗證實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了Angularjs制作簡單的路由功能demo，剛剛開始學習Angularjs,做的不好，還請見諒。2015-04-04
本文主要介紹AngularJS 表格,這里給大家整理了相關知識,并附代碼實例,有需要的小伙伴可以參考下2016-07-07
詳解Angular中通過$location獲取地址欄的參數(shù)
這篇文章主要介紹了詳解 Angular中通過$location獲取地址欄的參數(shù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家深入解析了Angular動態(tài)導入和懶加載實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
AngularJS實現(xiàn)與Java Web服務器交互操作示例【附demo源碼下載】
這篇文章主要介紹了AngularJS實現(xiàn)與Java Web服務器交互操作的方法,結合實例形式較為詳細的分析了AngularJS前臺ajax提交與javascript后臺處理的完整流程與實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-11-11