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. .NET高级工程师面试题之SQL篇

    1 题目 这确实是一个真实的面试题,琢磨一下吧!知识不用,就会丢掉,我太依赖各种框架和dll了,已经忘记了最基本的东西.有多久没有写过SQL了,我已经不记得了. 已知表信息如下: Department ...

  2. webform注册和Repeater

    一.注册1.日期(1)年月日用三DropDownList个,分别循环写入数字 代码写在后台  Page_Load中的代码 if (IsPostBack == false) { //年绑定数据 ; i- ...

  3. MySQL的错误:No query specified

    在做MySQL主从同步的时候通过: mysql> show slave status\G; *************************** 1. row **************** ...

  4. fzu 1402 猪的安家 (中国剩余定理)

     Problem 1402 猪的安家 Accept: 897    Submit: 5642Time Limit: 1000 mSec    Memory Limit : 32768 KB  Prob ...

  5. 关于C# 窗体自动隐藏和加载的问题

    最近在写一个小项目,开发一个小程序配合其他软件使用,其中一款软件在使用工作时需要截图生成报告,此时不能有其他应用程式界面在显示器桌面显示,故需要自动隐藏和加载窗体,通过阅读Windows API实现了 ...

  6. css控制页面打印(分页、屏蔽不需要打印的对象)

    样式: <style   media="print">     .Noprint   {   DISPLAY:   none;}     .PageNext   {   ...

  7. MFC下无法为空间添加变量解决

    许久不用MFC,今天在vs2008下用MFC写个小东西,结果在为控件添加变量的时候,居然无法成功——那个界面显示怪怪的,点击完成提示失败.    还好同事遇到过这个问题,给出链接http://hi.b ...

  8. XE3随笔11:Merge、Clone、ForcePath

    unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...

  9. python学习之路-day5-模块

    本节内容: 模块详解 1.模块定义 2.os&sys模块 3.time&datetime模块 4.random模块 5.shutil模块 6.shelve模块 7.configpars ...

  10. 清空form表单下所有的input值-------------jquery

    $(':input','#' + formid).not(':button, :submit, :reset').val('').removeAttr('checked').removeAttr('s ...