以下代码例子中,直接将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. 主席树的妙用——Just h-index

    题目传送门:https://ac.nowcoder.com/acm/contest/1107/C 题意:给出一个区间,求最大的 h ,使得区间内至少有 h 个数 大于等于 h. 思路:1.需要区间有序 ...

  2. 解压版mysql安装步骤

    第一步:解压mysql,例如解压后的目录在C:\Program Files\mysql-5.6.36-winx64 第二步:配置mysql环境变量,类似配置java的环境变量 计算机右键===> ...

  3. 阿里云服务器centos下安装配置svn服务器

      阿里云服务器centos下安装配置svn服务器 1.安装svn服务器端yum install subversion      从镜像下载安装svn服务器端中间会提示是否ok,输入y,确认安装成功提 ...

  4. [转]Log4j使用总结

    Log4j使用总结   一.介绍 Log4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件.甚至是套接口服务 器.NT的事件记录器. ...

  5. count(1),count(*)和count(列)的比较

    转自:https://www.cnblogs.com/Caucasian/p/7041061.html 1.关于count(1),count(*),和count(列名)的区别 相信大家总是在工作中,或 ...

  6. gitee上传下载代码命令

    在想要下载的文件夹下,鼠标右键,git bash 1.输入git init 进行初始化 2.git remote add origin https://gitee.com/XXXXXXXXXXXXXX ...

  7. spring学习之spring入门

    一 spring的基础 1:什么是spring spring是由Rod Johnson组织和开发的一个分层 的Java SE/EE 一站式轻量级开源框架,它以Ioc(控制反转)和 AOP(面向切面编程 ...

  8. 68)deque数组

    基本要求: 1)和vecctor基本区别   示意图 vector在尾部添加和删除, deque在尾部添加和删除,在头部添加和删除. 2)基本知识: 3)deque的构造形式:   4)基本操作和遍历 ...

  9. JDK8新特性之stream

    stream中有很多方法,讲一些常用的. 1.forEach(),遍历方法,很简单,对于一般的遍历可以替代for循环 List<String> strings = Arrays.asLis ...

  10. PyTorch基础——机器翻译的神经网络实现

    一.介绍 内容 "基于神经网络的机器翻译"出现了"编码器+解码器+注意力"的构架,让机器翻译的准确度达到了一个新的高度.所以本次主题就是"基于深度神经 ...