宝哥软件园

用AngularJS组织一些常用的说明

编辑:宝哥软件园 来源:互联网 时间:2021-09-09

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。输入名称并查看以下结果。

2015616115415280.png  (613372)

更多资讯
游戏推荐
更多+