AngularJS指令用于擴(kuò)展HTML。它們是以ng-前綴開(kāi)頭的特殊屬性。讓我們討論以下指令–
ng-app ?此指令啟動(dòng)AngularJS應(yīng)用程序。
ng-init ?該指令初始化應(yīng)用程序數(shù)據(jù)。
ng-model ?該指令定義了在AngularJS中使用的變量模型。
ng-repeat ?此偽指令為集合中的每個(gè)項(xiàng)目重復(fù)HTML元素。
ng-app指令啟動(dòng)AngularJS應(yīng)用程序。它定義了根元素。加載包含AngularJS應(yīng)用程序的網(wǎng)頁(yè)時(shí)，它將自動(dòng)初始化或引導(dǎo)應(yīng)用程序。它還用于在AngularJS應(yīng)用程序中加載各種AngularJS模塊。在以下示例中，我們使用<div>元素的ng-app屬性定義默認(rèn)的AngularJS應(yīng)用程序。
<div ng-app = ""> ...</div>
ng-init指令初始化AngularJS應(yīng)用程序數(shù)據(jù)。用于為變量分配值。在下面的示例中，我們初始化了一組國(guó)家。我們使用JSON語(yǔ)法定義國(guó)家/地區(qū)的數(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指令定義了在AngularJS應(yīng)用程序中使用的模型/變量。在下面的示例中，我們定義一個(gè)名為name的模型。
<div ng-app = ""> ... <p>Enter your Name: <input type = "text" ng-model = "name"></p></div>
ng-repeat指令為集合中的每個(gè)項(xiàng)目重復(fù)HTML元素。在以下示例中，我們遍歷國(guó)家/地區(qū)陣列。
<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>以下示例顯示了所有上述指令的使用。
<html>
<head>
<title>AngularJS指令</title>
</head>
<body>
<h1>示例應(yīng)用程序</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>請(qǐng)輸入您的姓名: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
<p>帶有地區(qū)的國(guó)家列表:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
<script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
</script>
</body>
</html>測(cè)試看看?/?