解决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对象之JS入门之Array对象操作小结
Jan 09 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
jquery图片切换插件
Mar 16 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
vue组件实现进度条效果
Jun 06 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
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作的文本留言本的例子(四)
2006/10/09 PHP
PHP的几个常用数字判断函数代码
2012/04/24 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
基于Python实现的微信好友数据分析
2018/02/26 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
python 动态绘制爱心的示例
2020/09/27 Python
老海军美国官网:Old Navy
2016/09/05 全球购物
观看安全警示教育片心得体会
2016/01/15 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python