以下代码例子中,直接将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. windows 10 远程连接出现CredSSP加密Oracle修正错误

    以下方法只受用于windows专业版或者企业版 . 解决方法: 运行 gpedit.msc 本地组策略: 计算机配置>管理模板>系统>凭据分配>加密Oracle修正 选择启用并 ...

  2. 【Gson】网页上String获取的Json数据转化为对象

    1.网络上获取的String Json格式转化为对象获取数据: 需要的包:Gson Maven依赖: <!-- https://mvnrepository.com/artifact/com.go ...

  3. Hadoop的FlieSystem类的使用

    1.使用FileSystem类需要导入jar包 解压hadoop-2.7.7.tar.gz 复制如下三个jar包和lib下所有jar包到项目文件下的lib文件 2.查看文件信息 @Test publi ...

  4. Window Mysql5.7免安装版配置

    1.下载mysql 5.7 32位:https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.19-win32.zip 5.7 64位:https ...

  5. ElasticSearch使用小结

    最近有个业务需求,即全文搜索关键字查询列表,因而转向ES的学习,也学习了大半个月了,做个笔记,总结下自己的学习历程. 独自学习一项新技术,总是难免走不少弯路的,在此推荐下ES的基础教程,对,好好学习官 ...

  6. LIINQ TO JS

    记录一下,方便自己查找... 自己在开发前端时,对于处理JSON,觉得真是枯燥.处理数据,基本都要循环. 所以我想着前端也能跟后端一样,有Linq来处理我的JSON对象就好了.上网一搜,找到了JSLI ...

  7. Struts 2 的常规配置

    Struts 2 的默认配置文件是struts.xml,该文件应该放在Web应用的类加载路径下,通常就是放在WEB-INF/classes路径下. struts.xml文件的最大作用是配置Action ...

  8. 离群点检测(Novelty Detection, Outlier Detenction)

    适合问题: 对于无标签的数据, 又想找出坏用户,完成业务目标. 参考: https://scikit-learn.org/stable/modules/outlier_detection.html 算 ...

  9. 吴裕雄--天生自然TensorFlow高层封装:Estimator-自定义模型

    # 1. 自定义模型并训练. import numpy as np import tensorflow as tf from tensorflow.examples.tutorials.mnist i ...

  10. python3.x设置默认编码(sys.stdout.encoding和sys.defaultencoding)

    查了一会资料得出的结论是如果你用的是python3.x,那么就最好别去设置sys.defaultencoding或者sys.stdout.encoding记住在需要编码的时候用encode,解码的时候 ...