AngularJS 表达式AngularJS 第一个应用
AngularJS 指令
AngularJS指令用于扩展HTML。它们是以ng-前缀开头的特殊属性。让我们讨论以下指令–
ng-app−此指令启动AngularJS应用程序。ng-init−该指令初始化应用程序数据。ng-model−该指令定义了在AngularJS中使用的变量模型。ng-repeat−此伪指令为集合中的每个项目重复HTML元素。
ng-app指令
ng-app指令启动AngularJS应用程序。它定义了根元素。加载包含AngularJS应用程序的网页时，它将自动初始化或引导应用程序。它还用于在AngularJS应用程序中加载各种AngularJS模块。在以下示例中，我们使用<div>元素的ng-app属性定义默认的AngularJS应用程序。
<div ng-app = ""> ...</div>
ng-init指令
ng-init指令初始化AngularJS应用程序数据。用于为变量分配值。在下面的示例中，我们初始化了一组国家。我们使用JSON语法定义国家/地区的数组。
<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元素。在以下示例中，我们遍历国家/地区阵列。
<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.htm
<html>
<head>
<title>AngularJS指令</title>
</head>
<body>
<h1>示例应用程序</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>请输入您的姓名: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
<p>带有地区的国家列表:</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>测试看看‹/›AngularJS 表达式AngularJS 第一个应用