最近我正在学习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,有人可以帮我找到我做错的地方吗?非常感谢。
答案 0 :(得分:1)
Watcher多次调用,因为您为完整对象data
创建了观察者。标记true
将为对象中的每个值创建子观察者。
这是一种正确的行为。我相信你想要的东西:
$scope.$watch('data', function(oldValue,newValue) {
if(oldValue.name != newValue.name){
++$scope.data.count;
}
},true);
第二个解决方案是仅在name
上观看:
$scope.$watch(function(){
return $scope.data.name
}, function(oldValue,newValue) {
++$scope.data.count;
});
答案 1 :(得分:0)
这是另一种方法。使用ng-keydown
指令并仅在输入元素内按下键时更新计数。
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;