关于ngModelOptions用法总结 让校验不过的验证绑定ngModel
updataOn 指定ng-model以什么绑定事件触发
default 就是默认的大家都知道
blur 失去焦点的时候更新
mouseover 鼠标滑过
.......
<input type="text" ng-model="name" ng-model-options="{updateOn: 'blur'}"><p>Hello{{name}}</p>
debounce 延迟更新
debounce
以毫秒为单位
<input type="text" ng-model="name" ng-model-options="{debounce: 1000}"><p>Hello{{name}}</p>
它的用法,其实很多比如再搜索的时候,当用户实时输入,数据模型更新,会频繁向后端请求。通过延迟更新模型,大大提高性能。
allowInvalid 是否需要验证后绑定数据 (此处就可以解决刚刚我遇到的问题)
allowInvalid
默认值为false
<input type="email" ng-model="name" ng-model-options="{allowInvalid: true}"><p>Hello{{name}}</p>
getterSetter 是否绑定到getters/setters函数上
其实 不是很懂这个用法getterSetter
默认值为 false
如果不绑定 ngModelOptions
<div ng-controller="myController"><form name="userForm">
Name: <input Type="text" name="userName" ng-model="user.name"/></form><pre>user.name = <span ng-bind="user.name()"></span></pre></div><script type="text/javascript">var m1 = angular.module('app', []);m1.controller('myController', ['$scope', function ($scope) {var _name = 'MAYUFO';$scope.user = {name: function (newNAME) {return angular.isDefined(newNAME) ? (_name = newNAME) : _name;}}}]);</script>
结果
如果使用了ngModelOptions
<div ng-controller="myController"><form name="userForm">
Name: <input Type="text" name="userName" ng-model="user.name" ng-model-options="{ getterSetter: true }"/></form><pre>user.name = <span ng-bind="user.name()"></span></pre></div><script type="text/javascript">var m1 = angular.module('app', []);m1.controller('myController', ['$scope', function ($scope) {var _name = 'MAYUFO';$scope.user = {name: function (newNAME) {return angular.isDefined(newNAME) ? (_name = newNAME) : _name;}}}]);</script>
结果
timezone
主要用在<input type ='day'>
<input type='time'>
中,可以指定时区utc
或者直接输入时差+0430
<input type="date" ng-model="$ctrl.date" ng-model-options="{timezone: '+0430'}"><p ng-bind="$ctrl.date"></p><input type="date" ng-model="$ctrl.datea" ><p ng-bind="$ctrl.datea"></p>
$rollbackViewValue 同步模型和视图
resetWithRollback(e) {if (e.keyCode === 27) {this.myForm1.myInput1.$rollbackViewValue();}}
<form role="form" name="$ctrl.myForm1" ng-model-options="{ updateOn: 'blur' }"><input type="name" name="myInput1" ng-model="$ctrl.view1" ng-keydown="$ctrl.resetWithRollback($event)"></form><p>{{$ctrl.view1}}</p>
resetWithRollback(e) {if (e.keyCode === 27) {this.myForm1.myInput1.$rollbackViewValue();}}
<form role="form" name="$ctrl.myForm1" ng-model-options="{ updateOn: 'blur' }"><input type="name" name="myInput1" ng-model="$ctrl.view1" ng-keydown="$ctrl.resetWithRollback($event)"></form><p>{{$ctrl.view1}}</p>
关于ngModelOptions用法总结 让校验不过的验证绑定ngModel的更多相关文章
- Form的is_valid校验规则及验证顺序
一.验证顺序 查看form下的源码了解顺序 BaseForm为基类,中间包含了is_valid校验方法 @html_safe class BaseForm: ......... self.is_b ...
- jQuery校验 表单验证
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- 接口鉴权之sign签名校验与JWT验证
需求描述: 项目里的几个Webapi接口需要进行鉴权,同接口可被小程序或网页调用,小程序里没有用户登录的概念,网页里有用户登录的概念,对于调用方来源是小程序的情况下进行放权,其他情况下需要有身份验证. ...
- JS密码校验规则前台验证(不能连续字符(如123、abc)连续3位或3位以上)(不能相同字符(如111、aaa)连续3位或3位以上)
密码必须为8到16位且必须包含数字和字母 密码必须包含特殊字符[_&#%] 不能连续字符(如123.abc)连续3位或3位以上 不能相同字符(如111.aaa)连续3位或3位以上 /** * ...
- springmvc(四) springmvc的数据校验的实现
so easy~ --WH 一.什么是数据校验? 这个比较好理解,就是用来验证客户输入的数据是否合法,比如客户登录时,用户名不能为空,或者不能超出指定长度等要求,这就叫做数据校验. 数据校验分为客户端 ...
- Angular使用总结 ---以密码确认为例实现模版驱动表单的自定义校验
上一篇 总结了模版驱动表单的基本用法,示例中的校验使用的是原生HTML5的校验方式,本文补上自定义校验的部分. HTML5原生的表单校验属性(必填,长度限制,取值间隔,正则表达式等等)可以满足普通的校 ...
- SpringMVC学习(三)———— springmvc的数据校验的实现
一.什么是数据校验? 这个比较好理解,就是用来验证客户输入的数据是否合法,比如客户登录时,用户名不能为空,或者不能超出指定长度等要求,这就叫做数据校验. 数据校验分为客户端校验和服务端校验 客户端校验 ...
- 【Web缓存机制系列】2 – Web浏览器的缓存机制-(新鲜度 校验值)
Web缓存的工作原理 所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务(假设有副本可用的情况下,未被销毁回收或者未被删除修改).这些规则有的在协议中有定义(如HTTP协议1.0 ...
- 应用二:Vue之ElementUI Form表单校验
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基 ...
随机推荐
- JAVA各种系统架构图及其简介
1.spring架构图 Spring是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您选择使用哪一个组件,同时为J2EE应用程序开发提供集成的框 ...
- 连接ORACLE数据库,是不是必须要安装oracle客户端的运行时
大神给的回答: net连接oracle使用的是oci接口,必须安装oracle客户端,并配置本地网络服务名 tnsnames.ora.不过oracle网站有精简版的客户端软件,不到30M吧,解压,并编 ...
- 声卡由于其配置信息(注册表中的)不完整或已损坏,Windows 无法启动这个硬件设备。(代码 19),
https://zhidao.baidu.com/question/531423560.html 开始 菜单运行 regedit 找到 HKEY_LOCAL_MACHINE\SYSTEM\Curr ...
- Fiddler抓包12-AutoResponder返回本地数据(mock)
前言 mock可以说是面试必问的话题的,我第一次接触mock的时候也是一脸懵逼.虽然fiddler工具用了很久,里面的打断点,设置自动返回数据功能都用过. mock说的通俗一点就是模拟返回数据,只是面 ...
- 找不到"javax.servlet.annotation.WebServlet"解决方法
以前创建的一个项目,打开的时候总是报错. import javax.servlet.annotation.WebServlet; 后来想起当时这个项目是发布在tomcat7.0下面的, 也就是说当时这 ...
- Jackson 教程演示样例
查看原文教程:http://www.ibloger.net/article/275.html Json经常使用的类库例如以下 Jackson:http://jackson.codehaus.org/ ...
- Android ActionBar使用介绍
一.什么是ActionBar 有图有真相,看一下图片就了解的差不多了 对于大多数应用,操作栏可以分割为 4 个不同的功能区域. 1. 应用图标 应用图标是您应用的标志.在应用图标位置摆放您自己的 lo ...
- 样条之埃尔米特(Hermite)插值函数
核心代码: ////////////////////////////////////////////////////////////////////// // 埃尔米特等距插值 /////////// ...
- GAN与NLP的讨论
https://www.jianshu.com/p/32e164883eab 这篇文章,GAN与NLP的讨论,可以看看.
- Sharepoint2013 Report Service初探
首先需要建立相应的report报表 如图: 这里的sql如下: SELECT PC.Name AS Category, PS.Name AS Subcategory, DATEPART(yy, SOH ...