关于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>

来源: http://www.cnblogs.com/mayufo/p/6113612.html

来自为知笔记(Wiz)

时间: 2024-10-11 08:15:23

关于ngModelOptions用法总结 让校验不过的验证绑定ngModel的相关文章

jquery validate.js表单验证的基本用法入门--不用写繁琐的验证代码了...

jquery.validate.js是jquery下的一个验证插件,功能比较强大,早就有所耳闻但是一只没有动手用过,现在在于能够研究一下了. 这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 1 <script type="text/javascript"> 2 function lang(key) { 3 mylang = { 4 'ls_input_myb': '请输入您的账户', 5 'ls_myb_email': '漫游

form表单调接口校验 比如后台验证用户名是否存在

<FormItem {...formItemLayout} label={'显示名'}> {getFieldDecorator('displayName', { initialValue: displayName, validateTrigger: 'onBlur', rules: [ { transform: val => val && val.trim() }, { required: true, message: '请输入显示名' }, { max: 20, mes

springmvc(四) springmvc的数据校验的实现

so easy~ --WH 一.什么是数据校验? 这个比较好理解,就是用来验证客户输入的数据是否合法,比如客户登录时,用户名不能为空,或者不能超出指定长度等要求,这就叫做数据校验. 数据校验分为客户端校验和服务端校验 客户端校验:js校验 服务端校验:springmvc使用validation校验,struts2使用validation校验.都有自己的一套校验规则. 二.springmvc的validation校验 Springmvc本身没有校验功能,它使用hibernate的校验框架,hibe

【Web缓存机制系列】2 – Web浏览器的缓存机制-(新鲜度 校验值)

Web缓存的工作原理 所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务(假设有副本可用的情况下,未被销毁回收或者未被删除修改).这些规则有的在协议中有定义(如HTTP协议1.0和1.1),有的则是由缓存的管理员设置(如DBA.浏览器的用户.代理服务器管理员或者应用开发者). 浏览器端的缓存规则 对于浏览器端的缓存来讲,这些规则是在HTTP协议头和HTML页面的Meta标签中定义的.他们分别从新鲜度和校验值两个维度来规定浏览器是否可以直接使用缓存中的副本,还是需要去源服务器

应用二:Vue之ElementUI Form表单校验

  表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明~ 如下代码是Form表单校验的demo示例: <template> <div id="demo"> <el-dialog title="表单校验示例" :close-on-click-modal="false" :visible.sync="dialogVisible" width=&q

笔记:Struts2 输入校验

Struts2的输入校验包含了客户端校验和服务器端校验,通过编写校验规则文件来实现输入校验,需要增加 Convention 插件,将 struts2-convention-plugin-2.3.31.jar 复制到 WEB-INF/lib 目录中 校验规则文件 校验规则文件命名格式:ActionName-validation.xml,其中 ActionName 为校验的 Action名称,后面的 -validation.xml 为固定字符串,并将校验规则文件保持到 Action 相同的路径下 S

开发指南专题十:JEECG微云快速开发平台--表单校验组件ValidForm

10.4Validform对象[方法支持链式调用] 如示例 var demo=$(".formsub").Validform(),那么demo对象会有以下属性和方法可以调用: tipmsg[object] 如:demo.tipmsg.s="error! no messageinputed."; 通过该对象可以修改除 tit 以外的其他提示文字,这样可以实现同一个页面的不同表单使用不同的提示文字. 具体可修改的提示文字 $.Tipmsg={//默认提示文字; tit:

问答项目---登陆账号密码登陆做AJAX异步校验

异步验证管理员帐号方法: /* 异步验证管理员帐号 */ public function checkAccount(){ if(!IS_AJAX){echo "页面不存在";die();}; $where = array( //'account' => $_POST['username'] 'account' => I('post.username') ); if(M('admin')->where($where)->find()){ echo 1; }else

C# 校验Email(电子邮件)地址是否合法

用于校验给定的Email地址是否合法,只针对用于提供的Email地址的格式,不对其是否真实存在进行校验. /// <summary> /// 验证EMail是否合法 /// </summary> /// <param name="email">要验证的Email</param> public static bool IsEmail(string email) { //如果为空,认为验证不合格 if (IsNullOrEmpty(email