整理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 相关文章推荐
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
Node.js插件安装图文教程
May 06 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
js实现提交前对列表数据的增删改查
Jan 16 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
cmd下运行php脚本
2008/11/25 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
js实现京东轮播图效果
2017/06/30 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
Python工程师面试题 与Python Web相关
2016/01/14 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
通过shell+python实现企业微信预警
2019/03/07 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
Python3离线安装Requests模块问题
2019/10/13 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
初一生物教学反思
2014/01/18 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL