解决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+XML 操作
Sep 20 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 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
Terran剧情介绍
2020/03/14 星际争霸
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
JavaScript高级程序设计
2006/12/29 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
Python获取当前时间的方法
2014/01/14 Python
Python中的tuple元组详细介绍
2015/02/02 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
12步教你理解Python装饰器
2016/02/25 Python
python中的set实现不重复的排序原理
2018/01/24 Python
python3.6编写的单元测试示例
2019/08/17 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
数控专业自荐书范文
2014/03/16 职场文书
治安消防安全责任书
2014/07/23 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
HAM-2000摩机图
2021/04/22 无线电
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
利用Python多线程实现图片下载器
2022/03/25 Python
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis