解决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打印纸函数代码(递归)
Jun 18 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
layui实现文件或图片上传记录
Aug 28 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 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
十天学会php(3)
2006/10/09 PHP
解决中英文字符串长度问题函数
2007/01/16 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
python实现删除文件与目录的方法
2014/11/10 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
python+opencv实现动态物体追踪
2018/01/09 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
django url到views参数传递的实例
2019/07/19 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
pandas 空数据处理方法详解
2019/11/02 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
个人自我鉴定范文
2013/10/04 职场文书
平面设计师的工作职责
2013/11/21 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
毕业典礼致辞
2015/07/29 职场文书