AngularJS快速入门指南04:指令
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:指令的更多相关文章
- AngularJS快速入门指南05:控制器
AngularJS控制器用来控制AngularJS applications的数据. AngularJS控制器就是普通的JavaScript对象. AngularJS控制器 AngularJS app ...
- AngularJS快速入门指南03:表达式
AngularJS通过表达式将数据绑定到HTML. AngularJS表达式 AngularJS表达式写在双大括号中:{{ 表达式语句 }}. AngularJS表达式绑定数据到HTML的方式与ng- ...
- AngularJS快速入门指南01:导言
AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...
- AngularJS快速入门指南20:快速参考
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南19:示例代码
本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...
- AngularJS快速入门指南18:Application
是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...
- AngularJS快速入门指南17:Includes
使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...
- AngularJS快速入门指南16:Bootstrap
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南14:数据验证
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
随机推荐
- .NET高级工程师面试题之SQL篇
1 题目 这确实是一个真实的面试题,琢磨一下吧!知识不用,就会丢掉,我太依赖各种框架和dll了,已经忘记了最基本的东西.有多久没有写过SQL了,我已经不记得了. 已知表信息如下: Department ...
- webform注册和Repeater
一.注册1.日期(1)年月日用三DropDownList个,分别循环写入数字 代码写在后台 Page_Load中的代码 if (IsPostBack == false) { //年绑定数据 ; i- ...
- MySQL的错误:No query specified
在做MySQL主从同步的时候通过: mysql> show slave status\G; *************************** 1. row **************** ...
- fzu 1402 猪的安家 (中国剩余定理)
Problem 1402 猪的安家 Accept: 897 Submit: 5642Time Limit: 1000 mSec Memory Limit : 32768 KB Prob ...
- 关于C# 窗体自动隐藏和加载的问题
最近在写一个小项目,开发一个小程序配合其他软件使用,其中一款软件在使用工作时需要截图生成报告,此时不能有其他应用程式界面在显示器桌面显示,故需要自动隐藏和加载窗体,通过阅读Windows API实现了 ...
- css控制页面打印(分页、屏蔽不需要打印的对象)
样式: <style media="print"> .Noprint { DISPLAY: none;} .PageNext { ...
- MFC下无法为空间添加变量解决
许久不用MFC,今天在vs2008下用MFC写个小东西,结果在为控件添加变量的时候,居然无法成功——那个界面显示怪怪的,点击完成提示失败. 还好同事遇到过这个问题,给出链接http://hi.b ...
- XE3随笔11:Merge、Clone、ForcePath
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...
- python学习之路-day5-模块
本节内容: 模块详解 1.模块定义 2.os&sys模块 3.time&datetime模块 4.random模块 5.shutil模块 6.shelve模块 7.configpars ...
- 清空form表单下所有的input值-------------jquery
$(':input','#' + formid).not(':button, :submit, :reset').val('').removeAttr('checked').removeAttr('s ...