解决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中SQL语句的应用实现
May 04 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
JS实现音乐导航特效
Jan 06 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 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
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
Python实现抢购IPhone手机
2018/02/07 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
np.dot()函数的用法详解
2020/01/17 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
高校辅导员推荐信范文
2013/12/25 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
《植树问题》教学反思
2016/03/03 职场文书
2019年大学推荐信
2019/06/24 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS