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的将桌面应用程序引入浏览器
Nov 19 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
JavaScript组合模式---引入案例分析
May 23 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 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
一个程序下载的管理程序(二)
2006/10/09 PHP
PHP中的正规表达式(一)
2006/10/09 PHP
php session和cookie使用说明
2010/04/07 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
php链式操作的实现方式分析
2019/08/12 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
Python内置函数——__import__ 的使用方法
2017/11/24 Python
Python中的Numpy矩阵操作
2018/08/12 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
超级实用的8个Python列表技巧
2020/08/24 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
YII2 全局异常处理深入讲解
2021/03/24 PHP
比赛口号大全
2014/06/10 职场文书
美容院员工规章制度
2015/08/05 职场文书