以下代码例子中,直接将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数据同步问题的更多相关文章

  1. angularJS中directive父子组件的数据交互

    angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...

  2. AngularJS中使用$http对MongoLab数据表进行增删改查

    本篇体验使用AngularJS中的$http对MongoLab数据表进行增删改查. 主页面: <button ng-click="loadCourse()">Load ...

  3. 后端接收不到AngularJs中$http.post发送的数据的问题

    1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pa ...

  4. 解析angularjs中的绑定策略

    一.首先回顾一下有哪些绑定策略? 看这个实在是有点抽象了,我们来看具体的实例分析吧! 二.简单的Demo实例 @绑定:传递一个字符串作为属性的值.比如 str : ‘@string’ 控制器中代码部分 ...

  5. angularjs中的绑定策略“@”,“=”,“&”实例

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

  6. angularJs中ngModel的坑

    angular中指令被用的最多的除了ng-repeat之外就非他莫属了吧,由于各种业务的需求,我们经常需要去写一些继承ngModel的指令,来满足各种奇葩需求,最多的莫过于表单的验证啦,另外你在封装一 ...

  7. vuex 实现vue中多个组件之间数据同步以及数据共享。

    http://pan.baidu.com/s/1hrJfpli  demo下载地址 前言 在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以 ...

  8. AngularJS 中ng-model通过$watch动态取值

    这个例子的意思是,当xxxx的长度不超过6时,xxxx和yyyy两个input的model是无关的,但当xxxx超过6,则yyyy会跟随其值而变化. 另一种做法是在input的ng-model后面添加 ...

  9. AngularJS 中的作用域

    问题引入 使用 Angular 进行过一段时间的开发后,基本上都会遇到一个这样的坑: 123456789101112 <div ng-controller="TestCtrl" ...

随机推荐

  1. POJ-2492 A Bug's Life(种类并查集)

    http://poj.org/problem?id=2492 题意: 给出一个T代表几组数据,给出一个n一个m,代表人的编号由1~n,m条命令,每条命令由两个数值组成,代表这两个人性别不同,问所有命令 ...

  2. 最短路——迪杰斯特拉算法 HDU_3790

    初识最短路,今天只弄了一个迪杰斯特拉算法,而且还没弄成熟,只会最基本的O(n^2),想弄个优先队列都发现尼玛被坑爆了,那个不应该用迪杰斯特拉算法写 表示还是不会优化版的迪杰斯特拉算法,(使用优先队列) ...

  3. 跟踪LinkedList源码,通过分析双向链表实现原理,自定义一个双向链表

    1.LinkedList实现的基本原理 LinkedList是一个双向链表,它主要有两个表示头尾节点的成员变量first  .last,因其有头尾两个节点,所以从头或从尾操作数据都非常容易快捷.Lin ...

  4. TX2Ubuntu16.04远程登录

    1.在PC机与TX2都要同步时钟: sudo apt-get install chrony sudo ntpdate ntp.ubuntu.com 如果ntpdate有错误检查是否安装ntpdate ...

  5. JavaScript学习总结(四)

    这一部分我们继续介绍JavaScript的常用对象. Number对象 创建Number对象 方式1: var 变量= new Number(数字) 方式2: var 变量 = 数字; 常用的方法 t ...

  6. 刷题33. Search in Rotated Sorted Array

    一.题目说明 这个题目是33. Search in Rotated Sorted Array,说的是在一个"扭转"的有序列表中,查找一个元素,时间复杂度O(logn). 二.我的解 ...

  7. c2000 N2A1 设置 KonNaD Settings & User Manual

    KonNaD Settings & User Manual c2000 N2A1  两个开关都推到左边,都设置成off

  8. python 删除文件

    import os 删除文件: os.remove() 删除空目录: os.rmdir() 递归删除空目录: os.removedirs() 递归删除目录和文件(类似DOS命令DeleteTree): ...

  9. 使用pyintaller打包python3.6项目,并用c#调用该脚本

    一.pythoninstaller 打包python项目 前提:安装python3.6环境+pycharm 1. 安装pyinstaller pip install pyinstaller 2. cm ...

  10. 用数组来实现Stack

    1:Stack特点 stack:栈,是一种特殊的数据结构,有着先入后出的特点(first in last out).stack中栈底始终不变,只有一端能变化.栈顶在有数据push的时候增大,有数据po ...