AngularJS：观察数组属性答案

【问题标题】：AngularJS : watch array propertyAngularJS：观察数组属性
【发布时间】：2013-12-16 22:06:05
【问题描述】：

问题在这里很明显http://plnkr.co/edit/ZphAKvZeoVtuGFSEmOKg?p=preview

假设您有一个如下所示的数组

var arr = [
 {
   'a': "123",
   'b': "654"
 },
 {
   'a': "456",
   'b': "321"
 }
];

arr.foo = 'bar';

$watch 会在您更改对象内部的某些内容时触发（例如 arr[0].a = 'hoopidoo'），但是当您更改 foo 时它不会（例如arr.foo = 'deedlilaa'，或通过ng-model。）

可能是 javascripts 的限制吗？我的意思是，当您遍历该数组时，您只会取回对象，因此无法枚举 foo..

检查 plunker 以了解我的意思。无论您在输入中键入什么内容或在控制器中执行什么操作，Watch 都不会触发。

【问题讨论】：

你写的甚至不是有效的javascript，尝试将“数组”粘贴到nodejs repl中，它不会工作，foo：'bar'不能是javascript数组的元素。您只能将 foo 定义为对象的属性，因为数组是对象。
我认为可以这样写下来，但如果没有..无论如何它在plunker中仍然是正确的，或者在这里jsfiddle.net/6S738
你改变了你的问题，我指的是修订版 1：stackoverflow.com/posts/20621906/revisions，修订版 1 代码无法编译，它不是有效的 javascript。
我知道，我正在回答你的评论，我认为可以写下来，因为它是在第 3 版中写下来的，但由于不可能，我更正了它（以匹配那些在 plunker 上）并告诉你。
没问题我的朋友，我们是来帮忙的，别担心。

标签： javascript arrays angularjs inheritance properties

【解决方案1】：

观察 Array 对象属性（与特定键处的对象相反）的唯一方法是明确地$watch 它们：

$scope.$watch('arr.param', function(newVal, oldVal) {
   // Some code
}
arr.param = 'foobar'

但是，如果您不关心数字和关联数组键的混合，您可以将 plunker 的第 37 行更改为如下内容：

$scope.arr['param'] = "abc";

【讨论】：

不幸的是，我在 ng-repeat 中使用了数组，我只希望实际的对象显示在其中，这些属性是一种帮助..
那么，我建议你明确地观察你想要的 Array 对象属性。 Afaik 没有其他方法可以解决您的问题。
具有此属性的输入上的那个或 ng-change 都会调用与 watch 相同的函数。

【解决方案2】：

使用：

$scope.$watchCollection

特别是您可以使用 $watchColletion 观察范围内的变量并更新您的按钮或任何您需要的东西。

$scope.$watchCollection(function () {
    if ($scope.myForm)
        return $scope.myForm;
}, function () {
   if ($scope.myForm)
   if (($scope.myForm.$invalid == true))
          $scope.formValidityChange(true);
    else
        $scope.formValidityChange(false);
}, true);

这将检查表单内所有变化的变量，您将更新控制器。我想你也可以通过比较两个对象来检查发生了什么变化，这可能会更困难。

【讨论】：

【解决方案3】：

Javascript 数组不允许“字符串索引”。 arr.foo 会将arr 的类型从Array 转换为Object。

【讨论】：

可能让您和我自己都感到困惑，因为我在 SA 上写下来的方式是完全无效的 javascript。不过，这在 plunker 上是正确的。我已经更新了问题。
a = []; a.foo = 1; Array.isArray(a); // true a instanceof Array; // true