ngModel双向绑定的一些问题

原创 2015年11月18日 17:59:30

看段代码先:

<body>
<div ng-controller="mainCtrl">
    <input id="myText" type="text" ng-model="aa"/>
    <button ng-click="change();">click me</button>
    {{aa}}
</div>

<script>
        angular.module('myApp', [])
            .controller('mainCtrl', function ($scope) {
                $scope.change = function () {
                    alert('changing..');
                    document.getElementById('myText').value = 'changed!';

                    function did(){
                        $scope.aa=document.getElementById('myText').value;
                    };

                }
            })
</script>
</body>

非常简单的一个例子,为了证明并不是text控件的value值改变,ngModel就会改变。。点击效果如下:
这里写图片描述
value改变了,然而后面并没有出现相应的值
原因就是改变value不等于改变model值,需要重新绑定:

$scope.change = function () {
                    alert('changing..');
                    document.getElementById('myText').value = 'changed!';

                    function did(){
                        $scope.aa=document.getElementById('myText').value;
                    };
                    //监听value值的改变,改变ngModel的值
                    // $scope.$watch('document.getElementById(\'myText\').value',did);
                }

加入这个代码,监听value值的改变,然后通知scope做出改变。。
如果是手动输入不会出现上面的问题。但直接进行DOM操作,改变value值就会出现这个问题

原理的话,个人理解就是绑定相关的东西了。。

版权声明:本文为博主原创文章,未经博主允许不得转载。

Angular2学习笔记.4、表单相关,双向数据绑定,HeroForm

开始本次我们将会学会如何用Angular创建表单、two-way data binding(双向数据绑定)、change tracking(检测变化)、validation(验证) 和 error h...

angular2中ngModel绑定问题

ts拿到的数据结构是一个json,json中的结构是类似于数组套数组的数据结构,在页面上显示的时候是一个input框,我需要做的是将类似于[1,2,3,4]这种结构的数据循环拿到其中的1,2,3,4,...

angular2在双向数据绑定时[(ngModel)]无法使用的问题

angular2在双向数据绑定时[(ngModel)]无法使用,出现的错误是: Can't bind to 'ngModel' since it isn't a known property of ...

Discuz!X3.1笔记之一:A1型Discuz!主机和域名绑定的一些问题

笔者打算建自己的一个Discuz!论坛耍

ionic -- 单选框使用数据双向绑定(angularjs)问题

今天在项目用需要使用标签的type=radio 的双向绑定功能,一开始ng-model绑定的变量在controller里一直无法实现绑定功能;源码如下: 在html里的代码: ng-model="c...

解决Flex4双向绑定因数据类型不同而出现编译错误问题

以下内容转载自 http://www.iyoya.com/2011/06/24/two-way-data-binding-problem.html 正文: 在flex4以前如果要实现双向数据绑定就必须...

AngularJS入门教程04:双向绑定

  • 2014年07月23日 20:27
  • 879KB
  • 下载

js实现数据双向绑定

  • 2017年07月18日 10:18
  • 1KB
  • 下载

C和汇编的双向调用以及一些问题

经过一步一步的写引导扇区,现在已经完成了,接下来的一步是写加载器。 加载器loader.bin是加载内核并且设置为保护模式,并且做一些描述符的初始化。但是接下来遇到的问题是如何使用C语言加速汇编的编...

局域网IP与mac双向绑定

  • 2014年03月12日 15:02
  • 80KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ngModel双向绑定的一些问题
举报原因:
原因补充:

(最多只允许输入30个字)