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" ...
随机推荐
- 操作实践:Java桌面程序实现日志级别热修改
声明:迁移自本人CSDN博客https://blog.csdn.net/u013365635 定位问题的时候往往需要动态修改日志级别并且不能影响业务的正常运行,也就是不能重启应用,此时就要使用到动态日 ...
- 吴裕雄--天生自然 PHP开发学习:数组排序
<?php $cars=array("Volvo","BMW","Toyota"); sort($cars); print_r($ca ...
- 注册网站 captcha reCHAPTCHA 错误
原因 出现这个错误,是因为注册和提交时候,没有正确输出验证码导致的.网站可能会为了防止恶意注册,而使用验证码.如果验证码没有被正确加载或验证,就会出现相关错误. 解决方案 如果是访问类似kaggle, ...
- [Algo] 646. Store Number Of Nodes In Left Subtree
Given a binary tree, count the number of nodes in each node’s left subtree, and store it in the numN ...
- PHP实现冒泡排序算法相关案例
<?php /** * 冒泡排序,先找出一个最大的浮上去,然后再依次找最大的浮上去 */ function mpsort($a = []){ $nCount = count($a); if($n ...
- PAT Basic 1023 组个最⼩数 (20) [贪⼼算法]
题目 给定数字0-9各若⼲个.你可以以任意顺序排列这些数字,但必须全部使⽤.⽬标是使得最后得到的数尽可能⼩(注意0不能做⾸位).例如:给定两个0,两个1,三个5,⼀个8,我们得到的最⼩的数就是1001 ...
- android studio 3.2 查看Deveice Monitor
View菜单下面的 Tool Windows 下面的 Devecie File Explorer
- webgis笔记
3.8(02) .特点:由服务端进行数据管理 开源的GO sever WMS/WCS/WTS 1sever/2engine/3database/4standard 扩展的空间数据库,存矢量.栅格.直接 ...
- sql plus笔记
指令请走这边 因为sql plus缓冲区有限 所以要查看输出有时会不太方便 使用spool语句将输出写入文件 sql>spool 要保存的完整路径 ; ; ; sql output; ; ; s ...
- 新年在家学java之基础篇-高级类的特性
继承 extends 子类的共性代码都是继承自父类的,每个子类只要写自己特有的代码 class 子类 extends 父类 继承提高了代码的复用性,提供了多态的前提,但是不要为了某个功能去继承 子类不 ...