AngularJS指令详解及示例代码


Posted in Javascript onAugust 16, 2016

AngularJS指令用于扩展HTML。这些都是先从ng- 前缀的特殊属性。我们将讨论以下指令:

ng-app - 该指令启动一个AngularJS应用。

ng-init - 该指令初始化应用程序数据。

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应用程序的数据。它被用来把值在应用程序中使用的变量。在下面的例子中,我们将初始化countries数组。使用JSON语法来定义countries数组。

<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元素集合中的每个项目。在下面的例子中,我们已经迭代了数组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指令详解及示例代码

以上就是AngularJS指令的基础资料,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
js opener的使用详解
Jan 11 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
AngularJS教程之简单应用程序示例
Aug 16 #Javascript
AngularJS教程之MVC体系结构详解
Aug 16 #Javascript
超实用的javascript时间处理总结
Aug 16 #Javascript
AngularJS教程之环境设置
Aug 16 #Javascript
JavaScript中获取时间的函数集
Aug 16 #Javascript
利用Javascript实现BMI计算器
Aug 16 #Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 #Javascript
You might like
php采集时被封ip的解决方法
2010/08/29 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
angularJS 入门基础
2015/02/09 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
PyQt5实现简单的计算器
2020/05/30 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
Linux常见面试题
2013/03/18 面试题
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
素食餐饮项目创业计划书
2014/02/02 职场文书
中国梦读书活动总结
2014/07/10 职场文书
励志演讲稿大全
2014/08/21 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
Golang bufio详细讲解
2022/04/21 Golang
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript