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

2018-01-13 11:10:44来源:oschina作者:毛太不容易人点击

分享

脏值检测表单验证表单元素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是一个完整的正则包括//,sssNg-disabled表示表单是否可以操作True不可以操作False可以操作Ng-readyonly表示表单是否是只读的true表示只读的False表示是可以写入Ng-checked表示表单是否被选中True表示被选中False表示没有被选中Ng-change为表单元素绑定一个change事件,1必须绑定ng-model2无法获取事件对象,即使传递$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/


相关热词搜索:课堂笔记


上一篇:angular 课堂笔记,类绑定,样式的绑定,Ng-if,Ng-switc.. 下一篇:最后一页


延伸阅读:

·爱创课堂前端培训 AngularJS angular简介(2017-11-02)
·爱创课堂前端培训 AngularJS 多分支模板指令(2017-11-03)
·爱创课堂前端培训 AngularJS 自定义指令(2017-11-03)
·爱创课堂前端培训 AngularJs 自定义观察者模式服务(2017-11-06)
·爱创课堂前端培训 AngularJs 项目实战(2017-11-06)

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台