整理AngularJS中的一些常用指令


Posted in Javascript onJune 16, 2015

 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中的一些常用指令

Javascript 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
Openlayers实现地图的基本操作
Sep 28 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 #Javascript
详解JavaScript中的表单验证
Jun 16 #Javascript
详解JavaScript中的异常处理方法
Jun 16 #Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 #Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 #Javascript
jQuery封装的tab选项卡插件分享
Jun 16 #Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 #Javascript
You might like
php array_merge下进行数组合并的代码
2008/07/22 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
python利用beautifulSoup实现爬虫
2014/09/29 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
高中数学教师求职信
2013/10/30 职场文书
会计自荐信范文
2014/03/09 职场文书
六一儿童节活动总结
2014/08/27 职场文书
2014最新离职证明范本
2014/09/12 职场文书
升职自荐信范文
2015/03/27 职场文书
鲁冰花观后感
2015/06/10 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
导游词之广西漓江
2019/11/02 职场文书
Python 如何安装Selenium
2021/05/06 Python
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server