解决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 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
js键盘事件的keyCode
Jul 29 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 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
JS 网站性能优化笔记
2011/05/24 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
js中的闭包学习心得
2018/02/06 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
Python线程详解
2015/06/24 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
python一键升级所有pip package的方法
2017/01/16 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
python基于property()函数定义属性
2020/01/22 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
基本款天堂:Everlane
2017/05/13 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
何玥事迹观后感
2015/06/16 职场文书
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby