8

私の質問を説明するために、単純な jsfiddle を作成しました。

フィドル

HTML:

<div ng-controller="MyCtrl">   
    <div ng-repeat="p in products">
        <span ng-click="overwrite(p)">{{ p.id }}: {{ p.name }}</span>
    </div>
</div>

Javascript:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

    var products = [{id:1, name:'first'}, {id:2, name:'second'}];
    $scope.products = products;

    var prod = {id: 3, name:'third'};

    $scope.overwrite = function(p){
        p.id = 4;
        p.name = 'forth';

        p = prod; // this doesn't work nor does angular.copy(prod)
    }
}

ご覧のとおり、手動でプロパティを設定すると、値がバインドされます。しかし、オブジェクトを上書きしても何も起こりません。これはどのように可能ですか？また、オブジェクトを元の状態に戻したい場合はどうすればよいですか?

を使用してバックアップ オブジェクトを作成するとしますvar productBackup = angular.copy(product)。その後、元の製品に変更を加え、後で変更をキャンセルすることにしました。を使用してこれを行いたいですproduct = productBackup。しかし、これはうまくいきません！この場合、このようにすべてのプロパティを手動で設定する必要がありますか?

product.id = productBackup.id;
product.name = productBackup.name;
etc...
4

2 に答える 2

23

使用すればangular.copy(source, destination)、望ましい効果を達成することができます。

更新されたフィドル

起こっているpことは、割り当てを行った後でも、angular がまだ元の参照を見ているということです。使用する場合は、角度が正しく監視されてangular.copy()いる値をコピーしています。prodp

同様の質問をしましたが、共有サービスでこの問題に対処しました。

于 2013-06-12T11:57:44.073 に答える
3

これまで AngularJS を使用したことはありませんが、ここで起こっていることは、パラメーターpが単純なキー/値オブジェクトではなく、より複雑な AngularJS オブジェクトであるということだと思います。your をそれに割り当てることprodで、オブジェクトの特定の部分を変更するのではなく、それをオーバーライドしています。

次のコード スニペットが役立つかもしれません。

for(var key in prod) {
    p[key] = prod[key];
}
于 2013-06-12T11:57:35.907 に答える