AngularJS基础学习笔记之指令


Posted in Javascript onMay 10, 2015

AngularJS通过指令将HTML属性进行了扩展。

AngularJS指令

AngularJS指令是带有ng-前缀的扩展HTML属性。

ng-app指令用来初始化AngularJS application。

ng-init指令用来初始化application数据。

ng-model指令用来将HTML控件(如input,select,textarea等)的值绑定到application数据。

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

ng-app指令同时也告诉AngularJS,它所在的<div>元素是AngularJS application的根元素,即作用域。

数据绑定

在上面的示例中,{{ firstName }}是一个AngularJS数据绑定表达式。

在AngularJS数据绑定中,AngularJS表达式使用AngularJS数据进行同步更新。

{{ firstName }}通过ng-model="firstName"同步更新数据。

<div ng-app="" ng-init="quantity=1;price=5">

Quantity: <input type="number"  ng-model="quantity">
Costs:  <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>

Note 使用ng-init指令在AngularJS开发中非常普遍。在控制器一节中你将会看到更好的初始化数据的方法。
重复HTML元素

ng-repeat指令用来重复创建一个HTML元素:

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
 <ul>
  <li ng-repeat="x in names">
   {{ x }}
  </li>
 </ul>
</div>

在对象数组上使用ng-repeat指令:

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
 <li ng-repeat="x  in names">
  {{ x.name + ', ' + x.country }}
 </li>
</ul>

</div>

Note AngularJS非常适合数据库CRUD(即创建,读取,更新和删除)操作。想象一下,如果这些对象来自于数据库呢?

ng-app指令

ng-app指令定义了AngularJS application的根元素。

当Web页面加载完成后,ng-app指令将auto-bootstrap(自动初始化)application。即自动初始化并引导AngularJS application执行。

在后面的章节中你将会学习到如何给ng-app指令指定一个值(例如ng-app="myModule"),从而与模块联系起来。

ng-init指令

ng-init指令用于为AngularJS application初始化值。

一般情况下不需要使用ng-init指令,而是使用控制器或者模块来进行初始化工作。

在后面的章节中你将会学习到有关控制器和模块的相关内容。

ng-model指令

ng-model指令用来将HTML控件(如input,select,textarea等)的值绑定到application数据。

ng-model指令还可以用来:

提供数据验证(如验证数字,email地址,必填项)。
提供数据的状态(如invalid,dirty,touched,error)。
为HTML元素提供CSS样式类。
将HTML元素绑定到HTML表单。

ng-repeat指令

ng-repeat指令用来为数据集合(或者数组)中的每一个元素生成一个对应的HTML元素。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
jQuery Ajax全解析
Feb 13 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
javascript实现画板功能
Apr 12 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
AngularJS基础学习笔记之表达式
May 10 #Javascript
AngularJS基础学习笔记之简单介绍
May 10 #Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 #Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 #Javascript
深入浅出分析javaScript中this用法
May 09 #Javascript
深入浅出理解javaScript原型链
May 09 #Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 #Javascript
You might like
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
php连接数据库代码应用分析
2011/05/29 PHP
php中session退出登陆问题
2014/02/27 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
Vue.use源码分析
2017/04/22 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
剪彩仪式主持词
2014/03/19 职场文书
校庆筹备方案
2014/03/30 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
公积金具结保证书
2015/05/11 职场文书
企业文化学习心得体会
2016/01/21 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
python通过新建环境安装tfx的问题
2022/05/20 Python