AngularJS $ watch无法处理对象

Question

将其放置在数组中的元素上时，我看不到它。

参见示例： http : //jsfiddle.net/zwrza551/2/

<div ng-app>
    <div ng-controller="Test">
        Name: <input type="text" ng-model="customer.name" />
        <hr/>
        <div ng-repeat="address in customer.addresses">
            <input type="text" ng-model="address.name" />
            <input type="text" ng-model="address.zipcode" />
            <hr />
        </div>
    </div>
</div>

---

function Test($scope){
    $scope.customer = {
        name: 'Customer 1',
        addresses: [
            { name: 'Address 1', zipcode: 123456, city: null, state: null },
            { name: 'Address 2', zipcode: 234567, city: null, state: null },
            { name: 'Address 3', zipcode: 456787, city: null, state: null },
            { name: 'Address 4', zipcode: 675684, city: null, state: null }
        ]
    };    

    $scope.$watch('customer.name', function(newName, oldName){
        console.log(newName);
    });

    $scope.$watch('address.zipcode', function(newCode, oldCode){
        console.log(newCode);
        //Make request to webservice, get addres for zipcode set city and state from this address.
    });
}

我可以在客户端名称上，因为地址数组不起作用。

Answer 1

尝试这样做：

$scope.$watch('customer.addresses', function(newCode, oldCode){
    for (... every address in customer.addresses) {
        // check if city and state are null and do the request if it is true
    }
}, true);

不要忘记打开深度监视开关。 （第3个参数为true ），该开关启用了检查angular.equals而不是比较引用，从而使您可以观察数组中元素的变化。

Answer 2

Ng-repeat具有其自身的作用域，因此您不能在外部编写“ address.zipcode”。 （我的意思是，您可以编写，但这将解决另一个变量）您可以编写：

$scope.$watch('customer.addresses[0].zipcode', function(newCode, oldCode){
    console.log(newCode);
});

对于所有索引来说都是一样的...但是正如前面所说，最好使用ng-change。 http://jsfiddle.net/qnb5aL1p/

Answer 3

您可以使用此方法解决.i：e添加多个手表，但最好与@Petr上面已经解释过的ng-change一起使用

您正在面对此问题，因为ng-repeat具有它自己的隔离范围，该范围超出了当前$ scope的范围。

for (var i = 0; i < $scope.customer.addresses.length; i++) {
    $scope.$watch('customer.addresses[' + i + ']',function(newValue, oldValue) {
        console.log(newValue.zipcode + ":::" + oldValue.zipcode);
    }, true);
}