查看: 57|回复: 0

angular 课堂笔记 复习 脏值检测,表单验证

发表于 5 天前
脏值检测表单验证表单元素name属性会映射到作用域上,Form元素name属性会直接映射到作用域上Input等表单元素name属性会映射到form元素对应
脏值检测 表单验证

表单元素 name属性会映射到作用域上,

Form元素name属性会直接映射到作用域上

Input等表单元素name属性会映射到form元素对应变量上

每一个变量会有四个特殊属性,他们的组合可以表达我们表单是否可以验证成功

$dirty 表单是否输入国

True输入过

False没有输入过

$pristine 表单是否输入过

True表示没有输入过

False表示输入过

$valid 表单内容是否合法

True表示合法 表单上如果所有的验证条件都通过

False表示不合法 表单上如果有一个验证条件不通过

$invalid 表单内容是否合法

True表示不合法

False表示合法

我们有一些指令可以为表单添加校验条件

必填项检测 ng-required,required

相同点

1 都是作用用在输入或者未输入阶段(初始时候,$valid是false)

不同点

1 required是浏览器指令,因此浏览器会根据该指令做一些处理,ng-require是一个指令,所以浏览器无法识别

2 ng-required必须传递一个值,(布尔值), require可以传可以不传

长度检测 maxlength,minlength,ng-maxlength,ng-minlength

相同点

1 都是检测长度

2 检测是在输入阶段,没输入阶段他们是不检测的,因此($valid值是true)

不同点

1 maxlength,minlength是h5属性,因此浏览器会识别并做相应的处理(maxlength当超过这个长度时候,无法在输入了),

Ng-maxlength,ng-minlength是一个指令,所以浏览器不是别它,因此兼容性会更好

正则检测 pattern,ng-pattern

相同点

1 都是做正则匹配校验

2 检测都是输入阶段,没有输入情况下,他们是不会检测的,因此初始化时候$valid值是true

不同点

1 pattern是h5属性,浏览器会识别,并做相应的处理

Ng-pattern是angular指令,因此浏览器不是别,兼容性更好

2 pattern 他的值是没有//正则(正则的内容部分)

Ng-pattern是一个完整的正则包括//,sss

Ng-disabled 表示表单是否可以操作

True不可以操作

False 可以操作

Ng-readyonly 表示表单是否是只读的

true 表示只读的

False表示是可以写入

Ng-checked 表示表单是否被选中

True表示被选中

False表示没有被选中

Ng-change 为表单元素绑定一个change事件,

1 必须绑定ng-model

2 无法获取事件对象,即使传递$event也无法获取

Ng-submit 表单提交事件

当表单元素form内部的类型为submit元素触发点击事件时候,会触发该指令

该指令时添加在form元素上
Run 是应用程序的执行(启动)方法,当该方法执行之后,应用程序启动起来

在该方法中我们可以使用根作用域,$rootScope
Ng-controller 控制器指令,作用是用来创建作用域的(除了跟作用域有特殊名字$rootScope,其他的任何作用域都叫$scope)

作用域基于原型式继承

1 子作用域通过继承可以使用父作用域中的数据

2 父作用域不能使用子作用域中的数据(原型式模式是单向的)

3 子作用域中定义一个与父作用域相同的变量,子作用域就不会再使用父作用域中的变量,并且也会影响到作用域中的变量,这一现象称之为覆盖

通过作用域对象我们可以通过一些属性来访问到他的父作用域,子作用域,兄弟作用域

$parent表示父作用域

$$childScope 表示子作用域

$$nextSibling 下一个兄弟作用域

$$prevSibling 前一个兄弟作用域

后面三个在工作中尽量不要使用
Ng-herf 动态为a标签创建href属性,

解决我们链接没有加载完成时候,点击失效的问题

Ng-src 动态为img标签创建src属性

解决我们地址没有加载完成时候,图片无法显示(一开始显示一个裂图)的问题

Ng-class 动态为元素绑定类,三种绑定方式

1 值是一个对象,

对象的名称表示类的名称

对象的属性值是一个布尔值,true表示类保留,false表示类删除

2 值是一个变量,变量可以插入多个类,通过空格隔开

3 值是一个数组,数组的每个成员表示一个类,

如果成员是一个变量,这个变量可以插入多个类(通过空格隔开),vue中不允许

在angular尽量一个变量对应一个类

Ng-style  动态为元素添加样式

1 值是一个对象

对象的属性是一个css样式属性名

对象的属性值,是一个css样式属性值(可以动态创建)

2 值是一个变量

变量就是一个对象,就是将第一种方式拿到js中,

Ng-if 条件模板指令,可以动态创建一个元素

True创建这个元素

Flase删除这个元素

Ng-show 动态显隐一个元素

Ng-switch 多分支条件模板判断指令,要有多个指令配合使用(指令创建在div上)

On 为ng-switch指令绑定一个条件变量

Ng-switch-default 默认显示元素指令

Ng-switch-when 该条件为真,则显示该元素

Ng-repeat 循环模板指令 ng-repeat=”item in list”

$index 循环时候的索引值,从0开始计数的

$first 是否是第一次循环

$last 是否是最后一次循环

$middle 是否是中间一次循环

$even $index是偶数次

$odd $index是奇数次

Ng-include 动态加载一个模板文件

他的属性值可以是字符串(完整的路径)

还可以是一个变量,这个变量的值是一个完成的路径

实现四基于异步请求实现的,所以使用这些指令要搭建服务器

本文章版权归爱创课堂所有,转载请注明出处。

更多详细内容请访问爱创课堂官网首页

http://www.icketang.com/


相关热词搜索:[color=rgb(14, 98, 192) !important]课堂笔记
上一篇:angular 课堂笔记,类绑定,样式的绑定,Ng-if,Ng-switc..
下一篇:[url=]最后一页[/url]
延伸阅读:
  • ·爱创课堂前端培训 AngularJS angular简介(2017-11-02)
  • ·爱创课堂前端培训 AngularJS 多分支模板指令(2017-11-03)
  • ·爱创课堂前端培训 AngularJS 自定义指令(2017-11-03)
  • ·爱创课堂前端培训 AngularJs 自定义观察者模式服务(2017-11-06)
  • ·爱创课堂前端培训 AngularJs 项目实战(2017-11-06)




回复

使用道具 举报