解决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提交并解析后台返回的XML的代码
Nov 03 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
详解CocosCreator项目结构机制
Apr 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
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
Python猴子补丁知识点总结
2020/01/05 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
详解Python IO口多路复用
2020/06/17 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
上班睡觉检讨书
2014/01/09 职场文书
趣味运动会策划方案
2014/06/02 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
2015年话务员工作总结
2015/04/29 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
Python实现批量自动整理文件
2022/03/16 Python
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android