解决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框架
Aug 13 Javascript
jQuery 使用手册(七)
Sep 23 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
js实现旋转木马效果
Mar 17 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
JS中常用的消息框总结
Feb 24 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
PHP 数据库树的遍历方法
2009/02/06 PHP
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
一个选择最快的服务器转向代码
2009/04/27 Javascript
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
初步讲解Python中的元组概念
2015/05/21 Python
vscode 远程调试python的方法
2017/12/01 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
利用Python优雅的登录校园网
2020/10/21 Python
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
学校十一活动方案
2014/02/01 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
环保专项行动方案
2014/05/12 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
预备党员转正材料
2014/12/19 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
Android 中的类文件和类加载器详情
2022/06/05 Java/Android