AngularJs 中ngModel绑定HTML5 date数据同步问题
以下代码例子中,直接将date类型的input标签与ng-model对应的变量绑定,会出现内存数据和页面数据不一致的问题。虽然AngularJS是双向数据绑定,但是如果用下面的方法,在页面更新date的内容时,内存中的$scope.testDate不会改变;在内存中更新$scope.testDate,页面上的日期也不会改变。
<input type="date" name="testDate" ng-model="testDate" placeholder="yyyy-MM-dd"/>
原因是AngularJs 的ngModel是引用绑定,而不是值绑定,那就意味着如果ngModel对应的引用对象没有变,但是引用对象的值发生了改变的话,Angular是检测不到变化的,因此不会做双向更新。
对应的纠正方法就是,将日期作为变量的属性绑定到date类型的input标签,如下:
$scope.testDate = {
value: new Date();
}
<input type="date" name="testDate" ng-model="testDate.value" placeholder="yyyy-MM-dd"/>
AngularJs 中ngModel绑定HTML5 date数据同步问题的更多相关文章
- angularJS中directive父子组件的数据交互
angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...
- AngularJS中使用$http对MongoLab数据表进行增删改查
本篇体验使用AngularJS中的$http对MongoLab数据表进行增删改查. 主页面: <button ng-click="loadCourse()">Load ...
- 后端接收不到AngularJs中$http.post发送的数据的问题
1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pa ...
- 解析angularjs中的绑定策略
一.首先回顾一下有哪些绑定策略? 看这个实在是有点抽象了,我们来看具体的实例分析吧! 二.简单的Demo实例 @绑定:传递一个字符串作为属性的值.比如 str : ‘@string’ 控制器中代码部分 ...
- angularjs中的绑定策略“@”,“=”,“&”实例
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...
- angularJs中ngModel的坑
angular中指令被用的最多的除了ng-repeat之外就非他莫属了吧,由于各种业务的需求,我们经常需要去写一些继承ngModel的指令,来满足各种奇葩需求,最多的莫过于表单的验证啦,另外你在封装一 ...
- vuex 实现vue中多个组件之间数据同步以及数据共享。
http://pan.baidu.com/s/1hrJfpli demo下载地址 前言 在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以 ...
- AngularJS 中ng-model通过$watch动态取值
这个例子的意思是,当xxxx的长度不超过6时,xxxx和yyyy两个input的model是无关的,但当xxxx超过6,则yyyy会跟随其值而变化. 另一种做法是在input的ng-model后面添加 ...
- AngularJS 中的作用域
问题引入 使用 Angular 进行过一段时间的开发后,基本上都会遇到一个这样的坑: 123456789101112 <div ng-controller="TestCtrl" ...
随机推荐
- Shell脚本exit用法与区别
在Shell脚本中,往往会遇到一些判断类型为某个值不符合预期值的时候就退出主脚本/当前脚本/当前函数,那么Exit与return的用法与区别是什么呢? 下面先使用Exit举个简单例子,脚本内容如下 # ...
- {转} MJPG流媒体在HTML5的呈现方案
最近碰到的需求:监控探头视频呈现到html页面上. 视频源协议:HLS; 视频源格式:Motion JPEG 简称 MJPG; 其中Motion JPEG(M-JPEG或MJPEG,Motion Jo ...
- 吴裕雄--天生自然MySQL学习笔记:MySQL 处理重复数据
有些 MySQL 数据表中可能存在重复的记录,有些情况允许重复数据的存在,但有时候我们也需要删除这些重复的数据. 防止表中出现重复数据 可以在 MySQL 数据表中设置指定的字段为 PRIMARY K ...
- 拉格朗日乘子(Lagrange multify)和KKT条件
拉格朗日乘子(Lagrange multify)和KKT条件 无约束问题 无约束问题定义如下: f(x)称为目标函数, 其中x是一个向量,它的维度是任意的. 通过求导, 令导数等于零即可: 如下图所示 ...
- uni-app文章详情-富文本展示 优雅展示代码块
在uni-app开发中,开发一个资讯详情页面,详情里包含图片和代码块.这时候用简单的rich-text控件已经不够用了.用官方demo里的html-parser.js也无法很好的展示代码区域.这个时候 ...
- 利用hutool配置发送邮件的问题 及 阿里企业邮箱526 Authentication failure 错误问题
hutool 中发送邮件的配置的比较简单.可以参考hutool 官方的教程. 个人尝试了qq邮箱发送邮件 和 阿里企业邮箱发送邮件. 主要是配置不一样: 一.qq邮箱 qq邮箱 我的邮箱配置是: # ...
- Mac系统下查看Android studio默认debug签名与正式签名的SHA1值
https://blog.csdn.net/weixin_32364917/article/details/80095063 获取默认debug签名SHA1值方法,也可以直接打开系统的终端 输入: k ...
- python-day1 爬虫基础之HTTP基本原理
经过前几天的开发环境配置,今天终于正式开启学Python之路了,今天主要看了HTTP的基本原理,下边做一个总结: 1.首先要了解的就是URI和URL,URI的全拼是Uniform Resource I ...
- java内存区域与内存溢出异常(2)
3.本地方法栈 本地方法栈与虚拟机栈作用相同,不同的是虚拟机栈为java方法服务,本地方法栈为native方法服务,本地方法栈会抛出StackOverFlowError和OutOfMemoryErro ...
- sqlserver 数据库分组后取第一条数据
分享一个朋友的人工智能教程.零基础!通俗易懂!风趣幽默!大家可以看看是否对自己有帮助,点击查看教程. 比如查询用户某一天最后一笔交易后的账户余额 SELECT *( SELECT *, row_num ...