以下代码例子中,直接将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. 百度链接提交-js代码推送批量推送版

    1原百度JS链接推送代码 首先我们来看一下原百度JS链接推送代码是这*样的 用百度自己的话讲:JS链接推送代码以网页为最小对象,服务于全平台多终端,PC站和移动站均可使用.安装代码的页面在任意平台(浏 ...

  2. 基于python的爬虫流程图(精简版)

    网址: https://www.processon.com/view/link/5e1148b8e4b07db4cfa9cf34 如果链接失效,请及时反馈(在评论区评论),博主会及时更新

  3. Spring Cloud Alibaba 教程 | 前世今生

    Spring Cloud Alibaba是什么 先来看一下官方是怎么定义Spring Cloud Alibaba的: Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案.此 ...

  4. Delphi生成即调用带窗体的Dll

    library frmDll; { Important note about DLL memory management: ShareMem must be the first unit in you ...

  5. Python之路,Day1 - Python基础1 介绍、基本语法、流程控制

    本节内容 1.python介绍 2.发展史 3.python 2.x or python 3.x ? 4.python 安装 5.第一个程序 Hello World 程序 6.变量 7.用户输入 8. ...

  6. WOJ 1546 Maze 图论上的状态压缩DP

    http://acm.whu.edu.cn/land/problem/detail?problem_id=1546 这个题目还是聪哥教的方法过的 首先搜索是必须的,而且通过搜索来缩点,这些应该要想到, ...

  7. 201609-2 火车购票 Java

    思路待补充 import java.util.Scanner; class Main{ public static void main(String[] args) { //100个座位 int[] ...

  8. 个性化bash

    zsh/on-my-zsh Ubuntu,deepin, 等可以使用  apt install 的系统  apt install zsh 一般就可以自动安装 RedHat(Fedora,Centos) ...

  9. [HEOI2013]ALO(可持久化Trie+链表)

    你永远不会相信一个快AFO的选手不会可持久化Trie. 其实异或粽子那题可以用可持久化Trie做,不过我还是没用,用的一般的Trie(其实可持久化是多此一举),于是到现在还是不会可持久化Trie. 这 ...

  10. 处理Ajax请求跨域问题

    ajax跨域的原理 ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resourc ...