表单数据绑定到 ng-repeat 中的 ng-model ......但是所有重复的值都被更改了吗？

Question

我正在制作一个简单的网络应用程序，允许用户 select 食品并自定义他们的订单（饮料、配菜和浇头）。我采用的方法是让每种食品都具有以下属性：

var food = {
 id:0,
 name:"Burger",
 drinks: [],
 sides: [],
 toppings: []
}

我正在获取整个饮料数组 [obj1, obj2..] 并将它们复制到我的控制器范围内的一个新变量中..然后修改它们的数量属性。提交表单后，带有新饮料数组的食品对象将保存到 ShoppingCart 工厂内的另一个数组（购物车）中。是的，这确实意味着食物对象将收到一个饮料数组，其中包含一些数量 = 0 的饮料。

angular.module('webMenu')

.controller('foodCtrl', ['$scope', 'SideFoods', 'ShoppingCart', 'FoodOrder', function($scope, SideFoods, ShoppingCart, FoodOrder){
$scope.food = FoodOrder.get();
    $scope.all_drinks = SideFoods.get_drinks(); //grabs all drinks from drinks factory
    $scope.drinks = $scope.all_drinks.slice(); // copies array into $scope variable which is connected to ng-repeat and ng-model

    $scope.submitOrder = function(){         // copies the modified drinks to food.drinks
        $scope.food.drinks = $scope.drinks;
        ShoppingCart.add($scope.food);       // shopping cart receives food
    };
}]);

这一切都有效，直到我尝试将另一种食品添加到我的购物车中。更改任何食品的饮料量将更改所有其他食品（在购物车内）的数量。我怀疑这是由于我使用 ng-repeat 和 ng-model 的方式所致。

<div id='drinks' ng-repeat='drink in drinks track by $index'>
            <div class='drink'>
                <!-- Using ng-model on drink.quantity fails to use a unique array -->
                <input type='number' ng-model='drink.quantity'>{{drink.name}} x{{drink.quantity}}
            </div>
        </div>

我的逻辑肯定有问题。我知道复制整个 drinks 数组是多余的，可以做得更好，但在我解决这个问题之前，我想弄清楚我当前的代码有什么问题。我又从头开始，但遇到了同样的问题。谁能帮我？？ :)

Answer 1

实际上$scope.drinks = $scope.all_drinks.slice();并没有复制整个drinks数组，它只是将reference传递给另一个变量。两个变量都指向同一个数组。而不是这条线只使用

angular.copy( $scope.all_drinks, $scope.drinks); // copies array into $scope variable which is connected to ng-repeat and ng-model

表单数据绑定到 ng-repeat 中的 ng-model ......但是所有重复的值都被更改了吗？

Form is data-binded to a ng-model inside ng-repeat... but all repeated values are changed?

arrays

angularjs

angularjs-scope

angularjs-ng-repeat

angular-ngmodel