Angular js push ändernde Werte in Array

Question

Ich bin eine Anwendung, die den Benutzer zu einem Warenkorb basierend auf ihrer Größe (individuell, mittel groß), die unterschiedliche Preise sind hinzufügen können. Das Problem, dem ich gegenüberstehe, ist, dass sich die Preise für alle Elemente im Array ändern, wenn ich mehr als eins hinzufüge (mit ng-click). Ich kann mich nicht darum kümmern!

Wenn ein Benutzer ein Produkt (zum Beispiel Pizza) auswählt, wird die Variable selectedProduct in das ausgewählte Produkt geändert.

Dies ist mein Code zum Warenkorb hinzufügen:

$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); 
}; 

Als ich fügen Sie ein Element (size = 1) an das Array per Push ich dies in der zusätzlichen Schlüssel in der Konsole

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

Wenn ich ein zweites Element hinzuzufügen (size = 3) Mein Array ändert sowohl das erste und das zweite Element im Array

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

Answer 1

Es passiert, weil Sie den Verweis auf die $scope.selectedProduct in Array schieben.

Kurz Beispiel Referenzen:

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

empfehle ich Ihnen ein neues Objekt auf addToCart zu erstellen und sie in ein Array schieben:

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

Oder Sie können $scope.selectedProduct kopieren auf addToCart mit 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

Ich denke, Sie sind unnötig verbindlich selectedProduct zu $scope.

Sie aktualisieren kontinuierlich und drücken $scope.selectedProduct auf das Array; und sehen Sie dieses Ergebnis, weil Sie die gleiche Referenz immer wieder passieren.

Try this:

$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

In Ihrer addcart Funktion sollten Sie selectedProduct auf diese Weise neu deklarieren: $scope.selectedProduct = {}. Der Grund - Objekte in JavaScript per Referenz zugewiesen, und Sie haben das gleiche Objekt in allen Array-Elementen. So aktualisieren Sie jede einzelne durch Referenz, wenn Sie extra ändern.