AngularJS指令用于扩展HTML。这些都是来自ng前缀的特殊属性。我们将讨论以下指令:
这个指令启动一个AngularJS应用程序。这个指令初始化应用程序数据。ng-model-这个指令定义的模型,被AngularJS中的变量使用。这个指令将重复集合中每个项目的HTML元素。Ng-app说明
ng-app指令启动一个AngularJS应用程序。它定义了根元素。它自动初始化或启动一个应用程序,该应用程序加载包含AngularJS应用程序的网页。它还用于加载各种AngularJS模块和AngularJS应用程序。在下面的例子中,我们定义默认的AngularJS应用程序使用div元素的ng-app属性。
Div ng-app=' './divng-init指令
ng-init指令初始化AngularJS应用程序的数据。它用于将值放入应用程序中使用的变量中。在下面的例子中,我们将初始化国家数组。使用JSON语法定义国家数组。
div ng-app=' ' ng-init=' country=[{locale:' en-us ',name3360 '美国' },{locale:' en-GB ',name3360 '英国' },{ locale : ' en '
ng-model指令定义了AngularJS应用程序中使用的模型/变量。在下面的例子中,我们定义了一个名为“name”的模型。
Div ng-app=' '.penter your name :输入类型=' text ' ng-model=' name '/p/div ng-重复指令
ng-repeat指令重复html元素集合中的每一项。在下面的例子中,我们已经迭代了数组国家。
Div ng-app=' '.区域设置为:/p ol Li ng-repeat=' country in country ' { ' country : ' country . name ',区域设置为3360 ' country . locale } }/Li/ol/div示例
以下示例显示了上述所有说明。testAngularJS.html
htmltitleAngularJS指令/title body h1示例应用程序/h1 div ng-app=' ' ng-init=' country=[{ locale : ' en-US ',name: '美国' },{locale:'en-GB ',name: '英国' },{locale:'en-FR ',name: '法国' }]' pEnter your Name:输入类型='text' ng-model='name'/p/p pList of country with local :/p ol Li ng-repeat=' country in country ' { ' country : ' country . name ',local e : ' country . local } }/Li/ol/div script src=' http :http://Ajax . googleapi.com/Ajax/libs/angular js/1 . 2 . 15/angular . min . js '/script/body/html输出
在网络浏览器中打开textAngularJS.html。输入名称并查看以下结果。