整理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 相关文章推荐
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 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 获取客户端的真实ip
2009/11/30 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
纽约手袋品牌:KARA
2018/03/18 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
药学专业个人自我评价
2013/11/11 职场文书
安全教育感言
2014/03/04 职场文书
给市场的环保建议书
2014/05/14 职场文书
支部鉴定材料
2014/06/02 职场文书
禁烟标语大全
2014/06/11 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
参加招聘会后的感想
2015/08/10 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书