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

当我通过推送将一个项目（size = 1）添加到数组时，我在控制台中的额外键中得到它

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

当我添加第二项（size = 3）时，我的数组会更改数组中的第一项和第二项

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引用到数组中。

参考文献的简短例子：

＆＃13;

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

＆＃13;

我建议你在addToCart上创建一个新对象并将其推入数组：

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

或者您可以使用angular.copy()

复制$scope.selectedProduct上的addToCart

$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 {。}}。{/ p>

您不断更新并将$scope.selectedProduct推送到阵列;并看到这个结果，因为你反复传递相同的引用。

试试这个：

$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

在您的addCart函数中，您应该以这种方式重新声明selectedProduct：$scope.selectedProduct = {}。原因 - 通过引用分配的javascript中的对象，并且所有数组元素中都有相同的对象。因此，当您更改额外内容时，您将通过引用更新每个。

Angular js推动更改数组中的值

3 个答案: