AngularJS $手表无法正常工作

时间:2017-10-02 09:55:33

标签: angularjs

最近我正在学习Angularjs,我的代码似乎没有按预期工作:  这是我的div

<div ng-app="myApp">
<div ng-controller="myController">
<input type="text" ng-model="data.name" value=""/>
{{data.count}}
</div>
</div>

我的controller是:

<script>
var app = angular.module('myApp',[]);
app.controller('myController', function($scope) {

    $scope.data = {
        name:"tom",
        count = 0
    }

    $scope.$watch('data', function(oldValue,newValue) {
        ++$scope.data.count;
    },true);

})
</script>

我期望的是当我在<input>框中输入内容时,{{data.count}}每次都会增加1。但是代码最初是11,每次我在输入字段中进行更改时,计数会增加11,有人可以帮我找到我做错的地方吗?非常感谢。

2 个答案:

答案 0 :(得分:1)

为什么会这样?

Watcher多次调用,因为您为完整对象data创建了观察者。标记true将为对象中的每个值创建子观察者

这是一种正确的行为。我相信你想要的东西:

$scope.$watch('data', function(oldValue,newValue) {
         if(oldValue.name != newValue.name){
             ++$scope.data.count;
          }

    },true);

Demo Fiddle

第二个解决方案是仅在name上观看:

$scope.$watch(function(){
  return $scope.data.name
  }, function(oldValue,newValue) {
      ++$scope.data.count;
});

答案 1 :(得分:0)

这是另一种方法。使用ng-keydown指令并仅在输入元素内按下键时更新计数。

&#13;
&#13;
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
  $scope.data = {
    name: "tom",
    count: 0
  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app='myApp'>
  <input type="text" ng-model="data.name" value="" ng-keydown="data.count = data.count+1" /> {{data.count}}
</div>
&#13;
&#13;
&#13;