关闭

ngModel双向绑定的一些问题

标签: angularjsweb
1199人阅读 评论(0) 收藏 举报
分类:

看段代码先:

<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值就会出现这个问题

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

0
0
查看评论

【Angular】——双向绑定ngModel实现联动

下拉框通过与后台交互查询到数据(多条数据),而后有一个输入框,输入框的数据来源于下拉框,随着下拉框数据而进行改变。如果每次都要与后台交互则浪费资源。
  • fjj15732621696
  • fjj15732621696
  • 2017-09-17 21:35
  • 264

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

开始本次我们将会学会如何用Angular创建表单、two-way data binding(双向数据绑定)、change tracking(检测变化)、validation(验证) 和 error handling(错误处理)等功能以及ngModel、ngControl和ngForm等指令的应用。 ...
  • github_33116729
  • github_33116729
  • 2016-02-22 00:25
  • 10944

AngularJS的双向数据绑定

在Angular网页应用中,数据绑定是数据模型(model)与视图(view)组件的自动同步。Angular的实现方式允许你把应用中的模型看成单一数据源。而视图始终是数据模型的一种展现形式。当模型改变时,视图就能反映这种改变,反之亦然。 Angular模板的工作方式与大多数只能单向数据绑定的...
  • bboyjoe
  • bboyjoe
  • 2015-09-04 23:57
  • 820

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

angular2在双向数据绑定时[(ngModel)]无法使用,出现的错误是: Can't bind to 'ngModel' since it isn't a known property of 'input'. 解决办法: 在文件 ...
  • u011321546
  • u011321546
  • 2017-10-28 16:05
  • 1088

ionic入门之数据绑定显示-1

[(ngModel)]是一个Angular语法,用于把hero.name绑定到输入框中。 它的数据流是双向的:从属性到输入框,并且从输入框回到属性。 如果将NgModel使用之后,程序崩溃了。 打开浏览器的控制台,如果看到:"ngModel ... isn't a known p...
  • inforstack
  • inforstack
  • 2017-05-06 16:19
  • 1660

angular中自定义组件实现双向绑定

使用get,set关键字get返回父组件变化后的值 set为组件值产生变化后父组件改变import {Input, Output } from '@angular/core'; ........ this.myModelValue : boolean; @Input() get m...
  • mad_coding
  • mad_coding
  • 2017-08-30 11:04
  • 333

angular数据双向绑定解密

AngularJS数据双向绑定揭秘 AngularJS在$scope变量中使用脏值检查来实现了数据双向绑定。和Ember.js数据双向绑定中动态设施setter和getter不同,脏治检查允许AngularJS监视那些存在或者不存在的变量。 $scope.$watch $scope.$wat...
  • SecondLieutenant
  • SecondLieutenant
  • 2017-11-06 11:56
  • 157

angular4中ngModel双向绑定在限制输入情况下与value值不一致的问题及尝试的解决方法

近期公司的一个后台项目在使用angular4进行开发,随着项目的推进和迭代开发,需要对有的input框的value值进行限制输入,例如目前项目的一些input框只允许输入数字和'.' 这两种形式的内容。就在input标签的中添加了(keyup)属性,将相应的ts文件中编写的一个正则验...
  • rushichunqiu
  • rushichunqiu
  • 2018-01-25 15:59
  • 99

ngModel 双向绑定(初学者易错点)

ngModel 大致介绍: NgModel指令数据绑定常用于开发表单的场景,数据绑定如下: 这种常用的写法类似一种语法糖,其实相当于如下写法: <input [ngModel]="model.name" (ngModelChange)="mode...
  • zwbHUST
  • zwbHUST
  • 2017-09-18 19:54
  • 270

从一段.html代码说起谈谈AngularJs中的双向数据绑定

AngularJs神奇的地方就是,其竟然不用自己写JS文件就可以实现简单的双向数据绑定,简单说下双向数据绑定,AngularJs中的双向数据绑定就是视图和模型数据的一个绑定的过程,当视图发生变化时,模型也会相应的更新(可能不同步,下面会说到),当模型数据发生变化时,视图内容也会发生变化(模型数据可能...
  • magiclr
  • magiclr
  • 2015-11-03 15:41
  • 2143
    个人资料
    • 访问:491749次
    • 积分:5483
    • 等级:
    • 排名:第5805名
    • 原创:181篇
    • 转载:22篇
    • 译文:1篇
    • 评论:47条
    最新评论