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 相关文章推荐
ASP.NET中AJAX 调用实例代码
May 03 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
微信小程序实现签字功能
Dec 23 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 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创建sprite
2014/02/11 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
教师一岗双责责任书
2014/04/16 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
森林病虫害防治方案
2014/06/02 职场文书
优秀党员先进材料
2014/12/18 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
会计主管竞聘书
2015/09/15 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
个人向公司借款协议书
2016/03/19 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers