解决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 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
jquery 实现的全选和反选
Apr 15 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
javascript打印输出json实例
Nov 11 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
PHP 编程的 5个良好习惯
2009/02/20 PHP
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
python对象及面向对象技术详解
2016/07/19 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
python实现简单俄罗斯方块
2020/03/13 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
python 实现图片裁剪小工具
2021/02/02 Python
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
市政工程技术专业自荐书
2014/07/06 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
介绍信怎么写
2015/01/30 职场文书
毕业感言怎么写
2015/07/31 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书