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 相关文章推荐
分享别人写的一个小型js框架
Aug 13 Javascript
使弱类型的语言JavaScript变强势
Jun 22 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
Node.JS如何实现JWT原理
Sep 18 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
收集的DedeCMS一些使用经验
2007/03/17 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
JS实现多物体运动的方法详解
2018/01/23 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
python数据结构之链表的实例讲解
2017/07/25 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
python 调用c语言函数的方法
2017/09/29 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
虚拟机下载python是否需要联网
2020/07/27 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
父亲八十大寿答谢词
2014/01/23 职场文书
初二物理教学反思
2014/01/29 职场文书
房屋出售协议书
2014/04/10 职场文书
教师求职自荐信范文
2015/03/04 职场文书
理想国读书笔记
2015/06/25 职场文书
投诉书范文
2015/07/02 职场文书
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers