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>

运行

使用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>

运行

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元素。

AngularJS快速入门指南04:指令的更多相关文章

  1. AngularJS快速入门指南05:控制器

    AngularJS控制器用来控制AngularJS applications的数据. AngularJS控制器就是普通的JavaScript对象. AngularJS控制器 AngularJS app ...

  2. AngularJS快速入门指南03:表达式

    AngularJS通过表达式将数据绑定到HTML. AngularJS表达式 AngularJS表达式写在双大括号中:{{ 表达式语句 }}. AngularJS表达式绑定数据到HTML的方式与ng- ...

  3. AngularJS快速入门指南01:导言

    AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...

  4. AngularJS快速入门指南20:快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  5. AngularJS快速入门指南19:示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

  6. AngularJS快速入门指南18:Application

    是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...

  7. AngularJS快速入门指南17:Includes

    使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...

  8. AngularJS快速入门指南16:Bootstrap

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  9. AngularJS快速入门指南14:数据验证

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

随机推荐

  1. WebForm 简单控件、复合控件

    简单控件: Label:被编译成span 样式表里设置lable的高度:  display:inline-block; Text  --文本 ForeColor  --字体颜色 Visible  -- ...

  2. Android 中的 WebView实现 Html5 标签网页加载

    自Android 4.4起,Android中的WebView开始基于Chromium(谷歌浏览器)支持浏览器的一系列功能,webkit解析网页各个节点,这个改变,使得WebView的性能大幅度提升,并 ...

  3. getpid 与 gettid 与 pthread_self

    获取进程的PID(process ID) #include <unistd.h> pid_t getpid(void); 获取线程的TID(thread ID) 1)gettid或者类似g ...

  4. Selenium简单介绍

    WEB自动化测试:指WEB应用系统从用户界面层面进行的自动化测试.通过用户界面测试内部的业务逻辑. 自身特点:(一)WEB页面上出现的元素有可能具有不确定性: (二)不同操作系统上不同WEB浏览器之间 ...

  5. poj 2551 Ones

    本题的想法很简单,就是模拟手算乘法.不一样的是,需要控制输出的结果:每一位都是由1构成的整数. 代码如下: #include <iostream> using namespace std; ...

  6. RRDTool 三个命令的使用

    要了解rrdtool如何使用就要先从rrd的数据存储方式开始,rrdtool就是为了操作这个数据库的工具,抄来下面一段文字解释. 0x01 什么是rrd数据库 所谓的“Round Robin” 其实是 ...

  7. Daily Scrum 12.2

    今日完成任务: 完成数据库文档说明:整理数据库(没整理完),明天继续:文档功能的修改以及在服务器上测试 明日任务: 黎柱金 整理数据库 孙思权 整理数据库 晏旭瑞 文档上传下载功能 冯飘飘 修复问题提 ...

  8. SQL Server跨服务器的数据库迁移

    1. 使用sql server task中back up 任务,保存为*.bak 文件. 2. 在另一个server中restore database,如果已经存在这个database,会覆盖之前的数 ...

  9. struts的DevMode模式

    在实际应用开发或者是产品部署的时候,对应着两种模式:开发模式(devMode):此时 DevMode=ture: 产品模式(proMode):此时  DevMode=false: 在一些服务器或者框架 ...

  10. 反射中通过class标记来获取字段及方法

    //这是通过class标记获取字段的代码 Field[] fields= classzz.getDeclaredFields(); //获取该class标记的表名代码,必须为,getSimpleNam ...