解决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 相关文章推荐
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
HTML node相关的一些资料整理
Jan 01 Javascript
Exjs 入门篇
Apr 07 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
Bootstrap精简教程
Nov 27 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
iview的table组件自带的过滤器实现
Jul 12 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
MVC模式的PHP实现
2006/10/09 PHP
MySQL修改密码方法总结
2008/03/25 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
许愿墙中用到的函数
2006/10/07 Javascript
xtree.js 代码
2007/03/13 Javascript
在网页里看flash的trace数据的js类
2009/01/10 Javascript
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
Python3 入门教程 简单但比较不错
2009/11/29 Python
Python用for循环实现九九乘法表
2018/05/31 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
详解Python字典的操作
2019/03/04 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
什么是lambda函数
2013/09/17 面试题
应届生求职信范文
2014/06/30 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android