AngularJS学习笔记二:AngularJS指令
AngularJS 指令:
AngularJS 通过被称为 指令 的新属性来扩展 HTML。
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
几个常用 指令:
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把应用程序数据绑定到 HTML 元素。
ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。
1. ng-app 指令
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。
ng-app 可以通过一个值(比如 ng-app="myModule")连接到代码模块。
2. ng-init 指令
ng-init 指令为 AngularJS 应用程序定义了 初始值。
通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。
3. ng-model 指令
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以:
- 为应用程序数据提供类型验证(number、email、required)。
- 为应用程序数据提供状态(invalid、dirty、touched、error)。
- 为 HTML 元素提供 CSS 类。
- 绑定 HTML 元素到 HTML 表单。
上面三个指令的综合案例如下:
<!DOCTYPE html>
<html>
<body> <div ng-app="" ng-init="firstName='John'"> <p>在输入框中尝试输入:</p>
<p>姓名:<input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p> </div>
<script src="angular-1.4.0/angular.min.js"></script> </body>
</html>
ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。
注意:一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。
数据绑定的案例:
上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。
AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。
{{ firstName }} 是通过 ng-model="firstName" 进行同步。
<!DOCTYPE html>
<html>
<body> <div ng-app="" ng-init="quantity=1;price=5"> <h2>价格计算器</h2> 数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price"> <p><b>总价:</b> {{ quantity * price }}</p> </div>
<script src="angular-1.4.0/angular.min.js"></script> </body>
</html>
两个文本域是通过两个 ng-model 指令同步的。
4. 重复 HTML 元素
ng-repeat 指令会重复一个 HTML 元素:
案例一:ng-repeat 指令用在一个普通字符串数组上:
<!DOCTYPE html>
<html>
<body> <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
<div>
<script src="angular-1.4.0/angular.min.js"></script> </body>
</html>
案例二:ng-repeat 指令用在一个对象数组上:
<!DOCTYPE html>
<html>
<body> <div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]"> <p>循环对象:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul> </div>
<script src="angular-1.4.0/angular.min.js"></script> </body>
</html>
AngularJS 完美支持数据库的 CRUD(增加Create、读取Read、更新Update、删除Delete)应用程序。
把实例中的对象想象成数据库中的记录。
AngularJS学习笔记二:AngularJS指令的更多相关文章
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJS学习笔记(二)
一.AngularJS Select(选择框) 1.使用 ng-options 创建选择框 <div ng-app="myApp" ng-controller="m ...
- 【AngularJS学习笔记】01 指令、服务和过滤器
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 比如: ng-app 指令初始化一个 AngularJS 应用程序.注意ng-app一般为空,如果值不为空,就得加这样一句代码va ...
- 【AngularJS学习笔记】AngularJS表单验证
AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty 表单有填写记录 3.$v ...
- AngularJS 学习笔记二
AngularJS指令 指令 描述 讲解 ng_app 定义应用程序的根元素. 指令 ng_bind 绑定 HTML 元素到应用程序数据. 简介 ng_click 定义元素被单击时的行为. HTML ...
- angularJS学习笔记二
angularJS四个特性 1.MVC <!doctype html> <html ng-app> <head> <meta charset="ut ...
- AngularJs学习笔记3——自定义指令
指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...
- AngularJS学习笔记(四) 自定义指令
指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
- AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)
这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> & ...
随机推荐
- [Effective JavaScript 笔记]第33条:使构造函数与new操作符无关
当使用函数作为一个构造函数时,程序依赖于调用者是否记得使用new操作符来调用该构造函数.注意:该函数假设接收者是一个全新的对象. 一个例子 function User(name,pwd){ this. ...
- C#结构体和类的区别
1.不能在结构体中定义默认构造方法: 2.在结构体中的非默认构造方法中,必须对结构体中所有的字段进行初始化,否则将报错. 3.在类中声明字段的同时,可以初始化,字段的值.在结构体中不可以. 4.结构体 ...
- Linux Apache 怎么修改工作模式
Apache默认为prefork模式,主要是考虑到稳定性的原因. 要切换到worker模式,则需要登录到linux上,进行如下操作: 进入/usr/sbin目录 cd /usr/sbin 将当前的pr ...
- 常州Day4题解
1. 高精度 这题略水,字符串可过,还不加压位等,操作只有BitShift和add/sub,不过编程复杂度有些高.(输出都是二进制我能说些什么...) 2. N皇后问题 (警告! 不是平时你见到的N皇 ...
- luarocks install with lua5.1 and luajit to install lapis
# in luarocks source directory...git clone https://github.com/archoncap/luarockscd luarocks ./config ...
- A PHP extension for Facebook's RocksDB
A PHP extension for Facebook's RocksDB 31 commits 2 branches 0 releases 2 contributors C++ 90.5% C 8 ...
- spring3.2.8+quartz2.2.0(比较全,对比quartz1.x的配置)
spring3.2.8 + quartz2.2.0报错: java.lang.IncompatibleClassChangeError: class org.springframework.sched ...
- 36.在字符串中删除特定的字符[Delete source from dest]
[题目] 输入两个字符串,从第一字符串中删除第二个字符串中所有的字符.例如,输入”They are students.”和”aeiou”,则删除之后的第一个字符串变成”Thy r stdnts.”. ...
- linux shell脚本守护进程监控svn服务
最近搭建的svn服务不知道什么原因服务总是被关闭(如果你不知道怎么搭建svn可以参考linux下搭建svn版本控制软件),因此用shell脚本实现一个守护进程.用于监控svn服务是否启动,如果服务不在 ...
- iOS 中使用Block时需要注意的retain circle
现在在ios中,block是越来越多了.自己在类中定义block对象时,需要注意block对象的使用方法,防止产生retain circle,导致内存泄露. 现在分析一下产生retain circle ...