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 相关文章推荐
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
Javascript 判断是否存在函数的方法
Jan 03 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
React组件生命周期详解
Jul 03 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
详解JS WebSocket断开原因和心跳机制
May 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 CodeIgniter框架的工作原理研究
2015/03/30 PHP
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
django model去掉unique_together报错的解决方案
2016/10/18 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Django 重写用户模型的实现
2019/07/29 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
python 异步async库的使用说明
2020/05/04 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
中科软测试工程师面试题
2012/06/16 面试题
高中军训感想300字
2014/03/04 职场文书
三好生演讲稿
2014/09/12 职场文书
学习十八大的心得体会
2014/09/12 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏