解决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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
禁止js文件缓存的代码
Apr 09 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
JavaScript DOM基础
Apr 13 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
JS实现时间校验的代码
May 25 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快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
零基础php编程好学吗
2019/10/11 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
Python运算符重载详解及实例代码
2017/03/07 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
上海天奕面试题笔试题
2015/04/19 面试题
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
公司担保书范文
2014/05/21 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
期末个人总结范文
2015/02/13 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
十八大观后感
2015/06/12 职场文书
节约用水广告语60条
2019/11/14 职场文书
canvas 中如何实现物体的框选
2022/08/05 Javascript
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python