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 相关文章推荐
jQuery使用技巧简单汇总
Apr 18 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
javascript每日必学之循环
Feb 19 Javascript
创建一个类Person的简单实例
May 17 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
微信小程序模板template简单用法示例
Dec 04 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
JS访问对象两种方式区别解析
Aug 29 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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
js date 格式化
2017/02/15 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
js实现页面导航层级指示效果
2020/08/25 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python中用Decorator来简化元编程的教程
2015/04/13 Python
python利用微信公众号实现报警功能
2018/06/10 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Python之时间和日期使用小结
2019/02/14 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
Ref与out有什么不同
2012/11/24 面试题
高校自主招生自荐信
2013/12/09 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
西安兵马俑导游词
2015/02/02 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
教学质量月活动总结
2015/05/11 职场文书