解决angularjs WdatePicker ng-model的问题


Posted in Javascript onSeptember 13, 2018

假设我们在项目中需要用到WdatePicker以及angularjs,并有如下的代码:

<div>
 <div class="h4">ddd</div>
 <input class="form-control" type="text" ng-model="text.ddd"
 readonly="readonly" 
 onClick="WdatePicker({dateFmt:'yyyy',lang:'zh-cn'})"
 style="width: 400px; cursor: pointer;" />
 </div>

这样的代码,问题就在于,当你需要进行提交的时候,你会发现$scope.text.ddd是没有值的。

解决方案是加一个onChange="",代码变为如下:

<div>
 <div class="h4">ddd{{text.bbb}}</div>
 <input class="form-control" type="text" ng-model="text.ddd"
 readonly="readonly" onChange=""
 onClick="WdatePicker({dateFmt:'yyyy',lang:'zh-cn'})"
 style="width: 400px; cursor: pointer;" />
 </div>

是的,只要加入这个就可以了。当然,你可能会注意到还有一些变动的是,ddd{{text.bbb}},我之所以这样写是为了解决一个疑惑的。这个疑惑就是,你加上onChange=""之后,哪怕你选择了日期,但是{{text.bbb}}也是取不出值来的,而且你输出一下$scope.text.ddd也还是undefined的,这个时候你可能会以为onChange=""无效。但是,其实不是这样的,当你提交数据时,你会发现它的确是被提交了的。

以上这篇解决angularjs WdatePicker ng-model的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
微信小程序实现左右列表联动
May 19 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 #Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 #Javascript
详解react内联样式使用webpack将px转rem
Sep 13 #Javascript
详解webpack 热更新优化
Sep 13 #Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 #Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 #Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 #Javascript
You might like
提问的智慧
2006/10/09 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
初识Javascript小结
2015/07/16 Javascript
详解javascript遍历方式
2015/11/11 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
运动会解说词50字
2014/01/18 职场文书
运动会致辞稿50字
2014/02/04 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis