Angularjs之ngModel中的值验证绑定方法


Posted in Javascript onSeptember 13, 2018

众所周知,在Angular中ngModel为动态双向绑定,存在两种方式。

例如,

方式一:

在html中,

<input type="text" ng-model="searchText" />
<button ng-click="check(searchText)">Check!</button>
{{ searchText }}

在controller中

$scope.check = function (searchText) {
 console.log(searchText);
}

方式二:

引用stackoverflow的一句话,

“If you use ng-model, you have to have a dot in there.” 
Make your model point to an object.property and you'll be good to go.

在html中,

<input ng-model="formData.searchText"/>
<button ng-click="check()">Check!</button>

在controller中,

$scope.formData = {};
$scope.check = function () {
 console.log($scope.formData.searchText.$modelValue);
}

但是我们常常会对ngModel当中的值进行验证,例如,

<input type="password" pattern="[0-9]*" placeholder="请输入6位新密码" ng-model="password.new_password" ng-blur="validateLength()">
<input type="password" ng-model="password.new_password" ng-keyup="compare(password)" name="repassword" ng-pattern="/^[0-9]{1,6}$/" />

发现ngModel当中的password.new_password不能实时绑定到controller中,原因为ngModel的值并没有符合pattern的规则。若符合规则,则正常绑定传递。

以上这篇Angularjs之ngModel中的值验证绑定方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
浅谈开发eslint规则
Oct 01 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
Javascript var变量删除原理及实现
Aug 26 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 #Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 #Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 #Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 #Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 #Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 #Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 #Javascript
You might like
PHP中路径问题的解决方案
2006/10/09 PHP
PHP面向对象分析设计的经验原则
2008/09/20 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
python 处理string到hex脚本的方法
2018/10/26 Python
python机器学习库xgboost的使用
2020/01/20 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
python属于解释语言吗
2020/06/11 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
工厂仓管员岗位职责范本
2014/07/17 职场文书
机动车交通事故协议书
2015/01/29 职场文书
幸福终点站观后感
2015/06/04 职场文书
教师节随笔
2015/08/15 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技