解决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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
js+html制作简单验证码
Feb 16 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
vue递归实现树形组件
Jul 15 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
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
vue ssr 指南详读
2018/06/29 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
python 提取文件的小程序
2009/07/29 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
浅析python的Lambda表达式
2019/02/27 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
pytorch的batch normalize使用详解
2020/01/15 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
拉丁舞学习者的自我评价
2013/10/27 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
房产委托公证书
2014/04/08 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
优秀教师演讲稿
2014/05/06 职场文书
团拜会策划方案
2014/06/07 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
先进个人申报材料
2014/12/30 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL