角型jsは配列内の値を変更します

Question

私は、異なる価格であるサイズ（個人、中型）に基づいて食品アイテムをバスケットに追加できるアプリケーションを構築しています。私が直面している問題は、複数を追加すると（ng-clickを使用）、配列内のすべてのアイテムの価格も変化するということです。私はそれの周りに私の頭を得ることができない！

ユーザーが製品（ピザなど）を選択すると、変数selectedProductが選択された製品に変更されます。

これはバスケットに追加するための私のコードです：

$scope.addToCart = function(key, size, price) { 


     //Add selected size and price 

     //Add 'extra' for selected price and size 
     $scope.selectedProduct.extra = {}; 
     $scope.selectedProduct.extra = { 
      //price is a float 
      price: price, 
      //$scope.productSizes is a single array that 
      //changes int values to sizes (1 => individual, 2 => medium ...) 
      size: $scope.productSizes[size], 
      //size is the int value of the size 
      sizeInt: size 
     }; 

     $scope.cart.push($scope.selectedProduct); 
}; 

私はプッシュを経由して、配列にアイテム（サイズ= 1）を追加すると、私はコンソール

0 Object 
    extra: Object 
     price: "1.99" 
     size: "Individual" 
     sizeInt: 1 

内の余分なキーでこれを取得します

Iは、2番目の項目（サイズ= 3）アレイの私の配列の変化第1および第2のアイテム

0: Object 
    extra: Object 
     price: "6.5" 
     size: "Large" 
     sizeInt: 3 
1: Object 
    extra: Object 
     price: "6.5" 
     size: "Large" 
     sizeInt: 3 

Answer 1

を追加しますそれは$scope.selectedProductへの参照を配列にプッシュしているために起こっています。参照の

ショート例：

var a = {'key': 'foo'}; 
 
var b = a; 
 
b['key'] = 'bar'; 
 
console.log(a['key']); // initially it was 'foo'

私はaddToCartに新しいオブジェクトを作成し、配列にそれをプッシュすることをお勧めします：

$scope.addToCart = function(key, size, price) { 
    $scope.cart.push({ 
     extra: { 
      price: price, 
      size: $scope.productSizes[size], 
      sizeInt: size 
     } 
    }); 
}; 

それとも、コピーすることができます$scope.selectedProductaddToCartとangular.copy()：

$scope.addToCart = function(key, size, price) { 
    var product = angular.copy($scope.selectedProduct); 
    product.extra = { 
     price: price, 
     size: $scope.productSizes[size], 
     sizeInt: size 
    }; 
    $scope.cart.push(product); 
}; 

Answer 2

selectedProductを$scopeに不必要にバインドしていると思います。

$scope.selectedProductを更新してアレイに連続的にプッシュします。あなたは同じ参照を何度も何度も渡しているので、この結果を参照してください。 $scope.selectedProduct = {}：あなたはselectedProductをこのように再宣言する必要があり、あなたのaddCart機能で

$scope.addToCart = function(key, size, price) { 


     //Add selected size and price 

     //Add 'extra' for selected price and size 
     var selectedProduct = {}; // new reference each time function is called 
     selectedProduct.extra = { 
      //price is a float 
      price: price, 
      //$scope.productSizes is a single array that 
      //changes int values to sizes (1 => individual, 2 => medium ...) 
      size: $scope.productSizes[size], 
      //size is the int value of the size 
      sizeInt: size 
     }; 

     $scope.cart.push(selectedProduct); 
}; 

Answer 3

：

はこれを試してみてください。 理由 - javascriptのオブジェクトが参照によって割り当てられ、すべての配列要素に同じオブジェクトがあります。したがって、あなたは余分なものを変更するときに参照ごとにそれぞれを更新しています。