爲什麼推送對象到數組覆蓋/更新現有的和類似的對象？

Question

我的JavaScript /角碼的表現與我期望的相反，我無法弄清楚爲什麼。我有一個角服務定義兩種方法用於獲取和設置

app.factory('orderItems',['Restangular','$mdDialog',function(Restangular,$mdDialog){ 
    var orderItems = []; 

    return{ 
     getOrderItems: function(){ 
      return orderItems 
     }, 


     setOrderItems: function(item,fillings){ 
      ... 
      orderItems.push(item) 
      ... 

     }, ... 

項目使用ng-click組項目

並通過項目和檢查插件; product_template.html

<div > 

    <md-button class="md-raised" ng-click="showAddons($event,product)">Add to Cart</md-button> 

    </div> 

controller

app.controller('productCtrl',['$scope','getProducts','orderItems','Restangular','$mdDialog',function($scope,getProducts,orderItems,Restangular,$mdDialog){ 
    //$scope.products; 
    $scope.products = getProducts(Restangular); 

    // Dialog 
    $scope.showAddons=function(ev,product){ 
    $mdDialog.show({ 
     locals:{current_Product: product,}, 
     //inline controller 
     controller:['$scope','current_Product','orderItems',function($scope,current_Product,orderItems){ 
     $scope.product = current_Product; 
     $scope.addons = { 
     checked:[],} 
     ... 
     }], 
     templateUrl: 'dialog.html', 
     targetEvent: ev, 
    }) 
    } 

}]) 

dialog.html

<md-list-item ng-repeat="addon in product.productAddons"> 
... 
<md-checkbox class="md-secondary" checklist-model="addons.checked" checklist-value="addon"></md-checkbox> 
</md-list-item> 
    <md-button class="md-raised" style="background-color:#f44336; color:#fff" ng-click="setOrderItems(product,addons.checked)">Done</md-button> 

當setOrderItems傳遞類似物體不止一次，就會出現問題。第一次，orderItems.push按預期工作，然後當一個類似的產品被傳遞給'setOrderItems'時，它被推送到'orderItems'，但是'orderItems'中的所有項目被更新爲這個當前設置的項目。

也就是說，如果orderItems被[{name:"chicken burrito",fillings:[{name:"cabbage"},{name:"cheese"}],...}]之前，設置一個類似的項目後，但差異餡料，orderItems更新爲[{name:"chicken burrito",filling:[{name:"guac"}],...},{name:"chicken burrito",filling:[{name:"guac"}],...}]。如果setOrderItems通過不同的產品說[{name:"goat burrito",...}]它按預期添加。

不能碰巧發現一個類似的問題。我究竟做錯了什麼。我希望能夠添加類似的物品，但不同的餡料到orderItems。

Answer 1

很難準確地看到您提供的代碼。但是如果我跟着你正確地做什麼，那麼問題可能是在這裏：

$scope.products = getProducts(Restangular); 

你得到一組產品，我認爲有對chicken burrito對象和goat burrito的對象。問題，我認爲，是你使用相同的對象每雞捲餅。所以當你將它推到數組上時，你正在推送對products中對象的引用，然後編輯該對象並再次推送它。但是，你又在推動對同一個對象的參考。如果你真的在第二次推動之前查看你的陣列，我懷疑你會看到已經在陣列上的對象已經被改變，以匹配你將要推入的對象，因爲它是相同的對象。

要解決這個問題，您需要複製對象。要做到這一點，看看這個問題：

Deep copying objects in angular?

angular.copy應該讓您複製product這樣，你是不是總是推同一對象。

例如，你可以這樣做：

setOrderItems: function(item,fillings){ 
    ... 
    var itemCopy = angular.copy(item); 
    orderItems.push(itemCopy); 
    ... 
} 

現在你總是推着副本到您的陣列和您的陣列將與獨立對象填寫。