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" ...
随机推荐
- eclipse默认的WebContent目录修改为webRoot
从网上下载了个Java Web项目,导入Eclipse后在Tomcat中发布,发现在Tomcat的Webapps目录下没有JSP页面 到项目中去看才发现有两个目录,一个WebContent,一个Web ...
- DRF框架之序列化器初体验
首先,我们需要明白序列化和反序列化的过程指的是什么. 序列化操作:将模型数据 ---> 字典数据 --->JSON数据(响应JSON数据的操作) 反序列化操作:将JSON数据 ---> ...
- UVA_10603 倒水问题 隐式图搜索
这道题目是刘汝佳白书上的例题,没有LRJ在白书上提到的划归为搜索问题,还真是一时难以想到好的解法.即三个瓶子,任意的一个状态都是一个节点,最后就划归为一个搜索问题. 由于题目数据量不大,三个杯子容量都 ...
- hdu1232 城镇间修路(并查集)
问题是这样的: Problem Description 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府"畅通工程"的目标是使全省任何两个城镇 ...
- 网鼎杯-Fakebook-反序列化和SSRF和file协议读取文件
0x00知识点:SSRF SSRF (Server-side Request Forge, 服务端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞.一般情况下,SSRF攻击的目标是从外 ...
- 和我一起从0学算法(C语言版)(二)
第一章 排序 第三节 快速排序 快速排序是最常用的排序方法.快排运用的递归方法很有意思.掌握了这种排序方法可以在将来学习递归时更快入门.只是快排的思路与之前的排序方法相比较为复杂,再加担心上我的表达能 ...
- 十二星座 英文名:Aries 金牛座 (4/21 - 5/20)的英文名: Taurus 双子座 (5/21 - 6/21)的英文名: Gemini 巨蟹座 (6/22 - 7/22)的英文名: Cancer 狮子座 (7/23 - 8/22)的英文名: Leo 处女座/室女座 (8/23 - 9/22)的英文名: Virgo 天秤座 (9/2
十二星座的具体顺序是:白羊座(Aries).金牛座(Taurus).双子座(Gemini).巨蟹座(Cancer).狮子座(Leo).处女座(Virgo).天秤座(Libra).天蝎座(Scorpio ...
- php 去除中间空格
<?php $str = 'a b c d e'; echo preg_replace('# #','',$str);//输出 "abcde"
- 相信301跳转大家都知道 rewrite
相信301跳转大家都知道,这样有利于权重集中,但是我在.htaccess文件写上: RewriteEngine on rewriteCond %{http_host} ^phpddt.com [NC] ...
- 瑞芯微RK3399六核-迅为3399开发板介绍
迅为3399开发板基于瑞芯微的RK3399处理器设计,Rockchip RK3399是瑞芯微推出的一款低功耗.高性能的应用处理器芯片,该芯片基于Big.Little架构,即具有独立的NEON协同处理器 ...