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 ...
随机推荐
- try catch finally 关闭流标准的写法
平常开发中,都知道要在finlly里关闭流,但是有时finlly里代码不当,会引起另外的异常. 以下是看struts2源代码看到的,随手记录下. 有两点注意: (1)判断流是否为空. (2)filly ...
- php substr,iconv_substr,mb_substr
php进行中文字符串的截取时,会经常用到二个函数iconv_substr和mb_substr,对这二个函数应该如何选择呢?参考下本文介绍的例子就明白了. 示例代码,用到了函数substr与iconv_ ...
- (转)《深入理解java虚拟机》学习笔记1——Java内存结构
java虚拟机规范规定的java虚拟机内存其实就是java虚拟机运行时数据区,其架构如下: 其中方法区和堆是由所有线程共享的数据区. Java虚拟机栈,本地方法栈和程序计数器是线程隔离的数据区. (1 ...
- php源代码安装常见错误与解决办法分享
错误:configure: error: libevent >= 1.4.11 could not be found 解决:yum -y install libevent libevent-de ...
- java se doc
J2SE 5.0 Performance White Paper http://www.oracle.com/technetwork/java/5-136747.html Java Tuning Wh ...
- SSL与TLS的区别以及介绍
转载 :http://kb.cnblogs.com/page/197396/ SSL:(Secure Socket Layer,安全套接字层),位于可靠的面向连接的网络层协议和应用层协议之间的一种协议 ...
- ./configure详解
'configure'脚本有大量的命令行选项.对不同的软件包来说,这些选项可能会有变化,但是许多基本的选项是不会改变的.带上'--help'选项执行'configure'脚本可以看到可用的所有选项.尽 ...
- [转载]深入理解ASP.NET MVC之ActionResult
Action全局观 在上一篇最后,我们进行到了Action调用的“门口”: 1 if (!ActionInvoker.InvokeAction(ControllerContext, actionNam ...
- [转载]jquery tmpl使用方法
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...
- 在smarty模板中嵌入php代码
我个人并不太喜欢smarty的语法,写起来比较啰嗦易出现匹配出错,但是旧项目中有许多工程都是采用它作模板.最近需要在此上稍微加一些PHP的内容,但我不想在模板控制层去一个一个assign,而想在模板文 ...