Angularjs中input的指令和属性
建议添加 novalidate属性(可无值)到form标签上,这样可以保证在表单不合法的情况下阻止浏览器继续提交数据。
可以给表单元素 input 添加 required 属性(可无值),让该表单成为必填项,如:
- <form action="" name="formName" novalidate ng-controller="test">
- <input type="text" name="name" ng-model="use.name" required>
- </form>
Angularjs中表单最常用的就是用 ng-model 属性进行双向绑定了。用 ng-model 绑定数据后,可以时时的和数据进行交互。
使用 ng-model 属性进行绑定的表单,会自动的添加一些 class 样式,如:
非必填表单
初始化时会添加 .ng-pristine 和 .ng-valid 两个class样式。当表单为非空时 class 样式会变成 .ng-valid 和 .ng-dirty 。其中将 .ng-pristine 变成了 .ng-dirty 。
必填表单
初始化时会添加 .ng-pristine 、.ng-invalid 和 .ng-invalid-required 三个class样式。当表单为非空时 class 样式会变成 .ng-dirty 、.ng-valid 和 .ng-valid-required 。
以上 class 样式还只是针对默认的input(即type=text的input),像那些特殊意义的 input ,如:type=email、type=number等。其 class 样式的种类会更多。
Angular input最小长度
- <input type="text" ng-minlength="5" />
Angular input最大长度
- <input type="text" ng-maxlength="5" />
Angular表单匹配正则表达式
- <input type="text" ng-pattern="/a-zA-z" />
AngularJS通过DOM元素上设置一个表单,从而使我们可以很容易的获取到当前 $scope 对象的属性。
判断表单未修改
- <form action="" name="formName" novalidate ng-controller="test">
- <input type="text" name="name" ng-model="use.name" required> <input type="button" value="查看" ng-click="fn(formName.name.$pristine);">
- </form>
- <script>
- function test($scope){
- $scope.fn = function(o){
- alert(o);
- }
- }
- </script>
运行以上代码,formName.name.$pristine 会返回一个布尔值。
因为 formName 是当前域(test)中 $scope 对象的属性,所以我们也可以用如下方法来获取 $pristine 值,以查看值是否有改变。如:
- <form action="" name="formName" novalidate ng-controller="test">
- <input type="text" name="name" ng-model="use.name" required> <input type="button" value="查看" ng-click="fn();">
- </form>
- <script>
- function test($scope){
- $scope.fn = function(){
- alert($scope.formName.name.$pristine);
- }
- }
- </script>
如下一些属性与 $pristine 属性类似,如 $dirty、$valid等。
判断表单修改过 $dirty 属性。
判断表单合法 $valid 属性。
判断表单非法 $invalid 属性。
判断表单错误 $error 属性。如果某个验证失败,则这个属性返回true,相反如果这个属性为false,则代表验证通过。
$error 属性是一个非常有用的属性,如:
- <form action="" name="testemail" novalidate ng-controller="testemail">
- <input type="email" name="email" ng-model="us.email" required> <input type="button" value="打印" ng-click="printemail()">
- </form>
- <script>
- function testemail($scope){
- $scope.printemail = function(){
- alert($scope.testemail.email.$error);
- }
- }
- </script>
如果 $error 是获取 type=email 的属性,则会返回这样一个对象:Object {required: true, email: false} ,其中返回的对象包含一个 required 和 email 属性。如果是获取 type=number 的属性则对象包含的属性则是 required 和 number 。
Angularjs中input的指令和属性的更多相关文章
- angular5中的自定义指令(属性指令)
属性型指令用于改变一个 DOM 元素的外观或行为. 在 Angular 中有三种类型的指令: 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 ...
- HTML中,input元素的 Disabled属性 所产生的后端无法接收数据的问题
背景 今天从前端提交 form表单 数据时,发现 设置 Disabled 的 input 元素的字段数据在后端无法接收到 原因 查阅资料(来自W3school): disabled 属性规定应该禁用 ...
- angularJS中的ng-repeat指令!
ng-repeat 指令: ng-repeat 指令用来遍历一个数组重复创建当前元素: <ul ng-app="myApp" ng-controller="myAp ...
- html中input标签的tabindex属性
当浏览者浏览网站时可以通过按TAB键在网页的链接中依次移动,这是一个相当方便实用的功能.但如果网页中链接太多,恐怕按TAB键就没什么作用了,这时不妨通过改变TAB键移动的顺序来突出重点,在某些重要页面 ...
- HTML中input标签的alt属性和title属性的比较
经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...
- iphone中input按钮设置disabled属性出现灰色背景没有显示问题
在项目中发现发送验证码的按钮,在点击后添加disabled属性后,iphone手机中出现disabled属性的默认背景颜色没有显示,反而直接显示它下面的父级元素的白色 点击前 点击后 倒计时的按钮消失 ...
- AngularJS 中{{}}与ng-bind指令
面试中,有被问题关于{{}}与ng-bind指令的问题,在此,分享下自己的知识点. 在脚本没有加载完成时,用户会看到{{}},界面比较丑陋. 一般的解决方法: 在index.html里面使用n ...
- angularjs中directive指令与component组件有什么区别?
壹 ❀ 引 我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件,当然directive也能实现组件这点毋庸置疑.在了解完两者后,即便我们知道co ...
- AngularJS中的指令全面解析(转载)
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
随机推荐
- jQuery ui 中文日历
jQuery ui 中文日历 <link href="css/jquery-ui-1.10.4.custom.min.css" rel="stylesheet&qu ...
- Spark Streaming揭秘 Day13 数据安全容错(Driver篇)
Spark Streaming揭秘 Day13 数据安全容错(Driver篇) 书接上回,首先我们要考虑的是在Driver层面,有哪些东西需要维持状态,只有在需要维持状态的情况下才需要容错,总的来说, ...
- 字符设备驱动中cdev与inode、file_operations的关系
一.cdev与inode 二.cdev与file_operations
- html lang
目前,语言的标签表示法的国际标准是RFC 4646,名称是<Tags for Identifying Languages>.简单说,这个文件规定,一种语言的标签应该按照如下方式排列: la ...
- Fedora 17安装NFS
1.NFS概述 NFS(Network File System)是一种分布式文件系统,允许网络中的安装不同操作系统的计算机间共享文件和外设,所以它的通讯协定设计与主机及作业系统无关. 它是由SUN公司 ...
- ofbiz进阶之实体引擎配置文件
The Open For Business Project: Entity Engine Configuration Guide 原文链接:http://ofbiz.apache.org/docs/e ...
- IOS播放音频 AVAudioPlayer(实例)
1. AVFoundation Build Phases => Link Binary With Libraies => + => AVFoundation.framework =& ...
- vs中的主题配置
比较讨厌vs的默认字体颜色及背景,代码看久了就受不了.不过自己手动配置的话还是比较麻烦的,这里有一个网站(http://studiostyl.es/)提供了很多主题,一般都是背景比较深色的,对眼睛比较 ...
- 第一个js库文件
<!DOCTYPE html> <html xmlns=; ; } }; })(); ...
- java后台SSH框架之Hibernate心得一
双向关联和单向关联 双向关联:这两个表无论哪一个更新另外一个表都更新 单向关联:就是只有一个主表更新从表才更新 从表更新主表不管 双向关联配置 表1配置 <set name="对象名称 ...