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 ...
随机推荐
- 解决firefox经常出现Adobe Flash 插件已崩溃
官方解决方法: 方案1:更新 Flash 方案2: 降级到 Flash 10.3 方案3:禁用 Flash 沙箱特性 最近很长一段时间用firefox浏览多个含大量图片和flash视频的网页经常会卡顿 ...
- Java.lang.RuntimeException: Unable to instantiate activity ComponentInfo
如果你更新了ADT的新版本,而工程文件中使用了其他的jar包,也可能会出现"java.lang.RuntimeException: Unable to instantiate activit ...
- CentOS配置vsftpd遇到550错误的解决办法
默认情况下用root是无法连接的,你可以创建一个非root帐户登录,但是登录是可以登录,却没有办法创建或是上传文件.有人说,可以把 SELinux关掉,可是这样未免也有点尺度太大了,其实是SELinu ...
- Kakfa揭秘 Day5 SocketServer下的NIO
Kakfa揭秘 Day5 SocketServer下的NIO 整个Kafka底层都是基于NIO来进行开发的,这种消息机制可以达到弱耦合的效果,同时在磁盘有很多数据时,会非常的高效,在gc方面有非常大的 ...
- javascript event兼容IE和FF
事件对象在IE和FF下的兼容写法 function abc(event){ var e=event||window.event; //键盘码的捕获 var key=e.which||e.keyCode ...
- linux下获得块设备大小
运行结果如下 jackie@Ubuntu:~/work/0602$ sudo ./a.out /dev/sda/dev/sda3907029168,2000398934016 //BLKGETSIZE ...
- 用JS给浏览器的关闭按钮添加事件
以下是指在js中实现,而非 <body onunload="close()"> 这种方法! 因为这样是在unload掉body的时候触发,而无论任何浏览器,都会在关闭的 ...
- ios NavBar+TarBar技巧
NavBar+TarBar iphone开发 NavBar+TarBar 1 改变NavBar颜色:选中Navigation Bar 的Tint属性.选中颜色. 2 隐藏“back”按钮: sel ...
- html input type="button" 页面跳转
<div class="message_text"> <p>你的申请已提交,请耐心等候哦!~</p><br /> <input ...
- easy ui datagrid 设置冻结列
为了冻结列,您需要定义 frozenColumns 属性.frozenColumn 属性和 columns 属性一样. $('#tt').datagrid({ title:'Frozen Column ...