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" ...
随机推荐
- Maven:org.apache.maven.archiver.MavenArchiver.getManifest错误
Eclipse导入maven多模块工程时报错org.apache.maven.archiver.MavenArchiver.getManifestorg.apache.maven.archiver.M ...
- 浅入深出Java输入输出流主线知识梳理
Java把不同类型的输入.输出,这些输入输出有些是在屏幕上.有些是在电脑文件上, 都抽象为流(Stream) 按流的方向,分为输入流与输出流,注意这里的输出输出是相对于程序而言的,如:如对于一个J ...
- 吴裕雄--天生自然MySQL学习笔记:MySQL LIKE 子句
在 MySQL 中使用 SQL SELECT 命令来读取数据, 同时我们可以在 SELECT 语句中使用 WHERE 子句来获取指定的记录. WHERE 子句中可以使用等号 = 来设定获取数据的条件, ...
- MySQL优化查询相关
[查询优化相关] 1.如何定位相关慢的查询: a.可以开启慢查询日志,也可以使用show profiles 去记录相关查询到一个临时表再分析. b.show processlist 看看有没有大量等 ...
- 汪慧和201771010123《面向对象程序设计JAVA》第四周实验总结
第一部分:理论知识学习部分 1.类 类(class)是具有相同属性和行为的一组对象的集合,是构造程序的基本单元,是构造对象的模板或蓝图. 2.对象 对象:即数据,对象有三个特性——1.行为 2.状态 ...
- ZJNU 2354 - 进贡
分开考虑k=1 k=2和k>=3的情况 2和3这两个质数比较特殊,遇到的话直接输出1就行 对于“神灵的不满意度为m的约数中,比m小且最大的那个”这句描述,指m除了自身和1这两个因子里找最大的那个 ...
- 关于Java编码规范
一.尽量使用卫语句 卫语句概念 条件表达式通常有两种表现形式,第一种形式是:所有分支都属于正常行为:第二种形式则是:条件表达式提供的答案中只有一种是正常行为,其他都是不常见的情况.这两类条件表达式有不 ...
- [Java-基础] 注解
引言 在进行Spring Boot 入门的时候,主程序需要@SpringBootApplication 来标注一个主程序类,说明这是一个Spring Boot应用.这个的作用是什么?去掉的话会报错.如 ...
- Tomcat启动报内存溢出错误:java.lang.OutOfMemoryError: PermGen space
windows操作系统 找到D:\Tomcat-7\apache-tomcat-7.0.28\bin(解压安装的Tomcat)目录下的catalina.bat文件,打开该文件,找到下图所示的内容:添加 ...
- 深入分析Java反射(五)-类实例化和类加载
前提 其实在前面写过的<深入分析Java反射(一)-核心类库和方法>已经介绍过通过类名或者java.lang.Class实例去实例化一个对象,在<浅析Java中的资源加载>中也 ...