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 相关文章推荐
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
JS中的作用域链
Mar 01 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
vue 中固定导航栏的实例代码
Nov 01 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
JQuery toggle使用分析
2009/11/16 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
puppeteer库入门初探
2019/01/09 Javascript
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
Python线程之定位与销毁的实现
2019/02/17 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
python 实现视频 图像帧提取
2019/12/10 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
Python项目跨域问题解决方案
2020/06/22 Python
利用python进行文件操作
2020/12/04 Python
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
保护环境演讲稿
2014/05/10 职场文书
保护环境倡议书300字
2014/05/19 职场文书
运动会入场词
2015/07/18 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python