解决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 相关文章推荐
javascript之可拖动的iframe效果代码
Aug 01 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
js本地图片预览实现代码
Oct 09 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
原生javascript实现分页效果
Apr 21 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
vue遍历对象中的数组取值示例
Nov 07 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 excel类 phpExcel使用方法介绍
2010/08/21 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
Javascript 陷阱 window全局对象
2008/11/26 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
详解vue v-model
2020/08/31 Javascript
Django如何实现内容缓存示例详解
2017/09/24 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python分布式计算dispy的使用详解
2019/12/22 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
房屋转让协议书范本
2014/04/11 职场文书
对教师的评语
2014/04/28 职场文书
师德师风整改措施
2014/10/24 职场文书
生产实习心得体会范文
2016/01/22 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript