$ watch未通过复选框检测模型更改

Question

我正试图在角度上做一些相对简单的事情，我无法弄清楚为什么它不起作用。最后，我只想在选中复选框时执行一个功能，然后在未选中时执行不同的功能。

所以我尝试使用ng-model来评估foo为true或false如果选中或取消选中该复选框，然后我可以执行if语句来选择函数。我视图中的{{foo}}切换为true / false，但console.log始终显示为undefined。谁知道为什么？

HTML：

<div  ng-repeat="element in elements">
   <input type="checkbox" ng-model="foo" /> {{foo}}
</div>

脚本：

$scope.$watch('foo', function(){
    console.log($scope.foo);
});

编辑：哎呀！我重复了一遍。有没有办法在重复内部实现这种效果？

Answer 1

你做了什么

你的观察者在ngRepeat之外。您的ngModel位于ngRepeat。

内

有什么问题

内部ngModel在内部范围内创建foo属性。您的观察者会读取外部范围的不存在的foo属性。

<强>解决方案

例如，有一个model对象，附加到外部范围

$scope.model = { foo: false };

将内部ngModel设置为model.foo。

有什么区别？

使用此解决方案，ngModel因为范围继承而得到正确的model对象，在分配foo属性而不遍历原型链时不会尝试做什么你写的。