Форма привязана к ng-модели внутри ng-repeat, но все повторяющиеся значения изменены?

Я делаю простое веб-приложение, которое позволяет пользователям выбирать продукты и настраивать их заказ (напитки, гарниры и начинки). Подход, который я использую, заключается в том, чтобы каждый продукт питания имел следующие атрибуты:

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>

Должно быть, что-то не так с моей логикой. Я знаю, что копирование всего массива напитков излишне и может быть выполнено лучше, но прежде чем приступить к этому, я хочу выяснить, что не так с моим текущим кодом. Я снова начал с нуля, но столкнулся с той же проблемой. Может кто-нибудь мне помочь?? :)


arrays angularjs angularjs-ng-repeat angular-ngmodel angularjs-scope
person Kangze Huang    schedule 28.11.2015    source источник
comment
не могли бы вы предоставить jsfiddle? где мы можем увидеть весь этот персонал в действии? если нет, пожалуйста, добавьте также услуги.   -  person Ashot    schedule 28.11.2015
comment
тоже одно примечание. Вы должны использовать angular.copy() function для копирования любого объекта. Не используйте срез или простое назначение, потому что в этих случаях будет назначена только ссылка.   -  person Ashot    schedule 28.11.2015

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле $scope.drinks = $scope.all_drinks.slice(); не копирует весь массив напитков, а просто передает ссылку на другую переменную. Обе переменные указывают на один и тот же массив. Вместо этой строки просто используйте

angular.copy( $scope.all_drinks, $scope.drinks); // copies array into $scope variable which is connected to ng-repeat and ng-model
person Furqan Aziz    schedule 28.11.2015
comment
Это сработало! :) хотя мне пришлось изменить его на $scope.drinks = angular.copy($scope.all_drinks, $scope.drinks); - person Kangze Huang; 28.11.2015