关于javascript：数组对象上的$ watch


Angular $watch on an array of objects

让我说我有一系列动物对象绑定到我的范围。每个对象都有一个"名称"属性和一个"声音"属性。

然后我$ watch数组并将objectEquality标志设置为true(第三个参数)。

在我看来，我使用动物数组的ng-repeat为每个动物创建一个按钮。然后，我将点击处理函数传递给相应的动物对象。

在单击处理程序中，如果我要更新其中一只动物的名称，则$ w??atch可以获取更改，并且可以在侦听器函数中进行处理。

现在我遇到的问题是，如果我要用一个新对象重新分配一个动物对象，而不仅仅是更改其属性，则$ w??atch不会接受此更改。对象数组已明显更改，但未调用我的侦听器。

下面的plunkr是我刚刚概述的示例：

http://plnkr.co/edit/PHXq32?p=预览

相关讨论

尝试将$ index作为参数传递给您的函数，然后执行

1
$scope.animals[index] = {name:'Billy', sound:'baaaa'};

应该做的

这与AngularJS无关
第一件事-永远记住JavaScript是通过价值传递的
这是什么意思？让我们来考虑两种情况，图元，数组和对象

  • 原语-您只需将值传递给函数即可。因此，如果将在函数外部初始化的变量作为函数参数传递给函数内部，则对函数内部的值所做的更改不会更改外部的值。

    function testPrimitive(prm){
    prm = prm+1;
    }

    var prm = 1;
    testPrimitive(prm);
    console.log(prm) //prm will be    静止1

  • 对象和数组-这里传递的值是对象的引用。因此，问题在于，如果新创建了整个对象，传递给函数的对象的更改属性是如何反映出来的，而更改却不能反映出来。让我们举个例子。

    var foo = {id:1, name:'iamfoo'}, bar = {id:2, name:'iambar'};
    //so here two objects are created lets say at some referrence in memory ref1 and ref2 and the //memory location is assigned to foo and bar

    function updateObj(o1, o2){
    o1.name='changed';
    //the object o1 is not newly created. its only takes the reference and updates the property.
    o2 = {id:3, name:'iamnew'};
    // A new object is created in a reference say 'ref3' and the ref3 is assigned to o2. Note here ref1 still remains the same
    }

    updateObj(foo, bar); //将ref1和ref2内存位置值传递到此处

    console.log(foo);//foo will be {id:1, name:'changed'}
    console.log(bar);
    //bar will be {id:2, name:'iambar'} since bar still has ref1 memory location value

    • 在您的情况下，您要在数组内传递一个创建新对象并分配引用。一旦您不在函数循环中，则引用将丢失，并且无法在任何地方使用；
    在函数内部

    尝试animal.name ='Billy'; animal.sound='baaaa';

    关于此的一篇不错的文章：http://snook.ca/archives/javascript/javascript_pass

    尽管我觉得这些看起来像是基本的东西，但大多数人对此并不了解或非常困惑。

    相关讨论