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 相关文章推荐
javascript 一些用法小结
Sep 11 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
jQuery实现大图轮播
Feb 13 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 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压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
js 巧妙去除数组中的重复项
2010/01/25 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
Python下Fabric的简单部署方法
2015/07/14 Python
Python分支结构(switch)操作简介
2018/01/17 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
python文件及目录操作代码汇总
2020/07/08 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
C#面试常见问题
2013/02/25 面试题
《世界多美呀》教学反思
2014/03/02 职场文书
社会工作专业求职信
2014/07/15 职场文书
环保公益策划方案
2014/08/15 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
年度考核个人总结
2015/03/06 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL