範圍變量更新的變更服務變量

http://plnkr.co/edit/oTHJcVVzJE5CwMnFMEpS?p=preview

問題：在範圍變量「specifications.selectedColor」的變化是覆蓋其他產品的規格即改變所有產品的selectedColor。

重現步驟： 1）單擊立即購買。 checkoutProductList [0] .selectedColor設置爲紅色。 2）從下拉菜單中選擇藍色。 3）點擊立即購買。 checkoutProductList [0] .selectedColor設置爲藍色。

在點擊立即購買第二時間（上述的步驟3），它增加了在checkoutProductList陣列即checkoutProductList其他產品[1]，它不應該改變 checkoutProductList [0] .selectedColor從紅到藍。

可以做些什麼來保持每個產品的規格分開？

代碼：位指示

var app = angular.module('plunker', ['ui.select', 'ngSanitize']); 

app.controller('MainCtrl', function($rootScope, $scope,checkoutService) { 

    $scope.productAvailableColors=['Red','Blue']; 
    $scope.specifications={'selectedColor':'Red'}; 



    $scope.buyNow = function(){  

    checkoutService.setCheckoutProductList($scope.specifications); 
    }; 

}); 


app.service ('checkoutService', function(){ 
    var checkoutProductList=[]; 
    this.setCheckoutProductList = function (specs){ 
    checkoutProductList.push(specs); 
    window.alert(checkoutProductList.length); 
    window.alert(checkoutProductList[0].selectedColor); 
    } 

})

HEAD

HTML: 
<!DOCTYPE html> 
<html ng-app="plunker"> 

<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 

    <script> 
    document.write('<base href="' + document.location + '" />'); 
    </script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script> 


    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular-sanitize.js"></script> 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css"> 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.19.4/select.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.19.4/select.min.css"> 



    <script src="app.js"></script> 
</head>

BODY

<body ng-controller="MainCtrl"> 

<div class="productModal-circle" 
    style="cursor: pointer; font-size: 14px; "  

     aria-hidden="true" 
     ng-click="buyNow()" 
     title="Buy Now!" id="buyNow">Buy Now         

    </div> 

    <div id="choices" class="panel-collapse collapse in"> 


     <div class="panel-body">           
      <ui-select ng-model="$parent.specifications.selectedColor" 
       theme="bootstrap" 
       ng-disabled="false" 
       close-on-select="true"            
       style="color: black;" 
       title="Choose Color and Design" 
       > 
       <ui-select-match placeholder="Choose Color/Design">{{$parent.specifications.selectedColor}}</ui-select-match> 
       <ui-select-choices repeat="listItem in productAvailableColors | filter:$select.search"> 
       <div ng-bind-html="listItem | highlight: $select.search"></div> 
       </ui-select-choices> 
      </ui-select> 
     </div> 

    </div> 
    {{specifications | json}} 
</body> 


</html>

來源

2016-10-15 user1513857

其爲我工作 –

你的plunkr與你所顯示的代碼不一樣。您在PLUNK中沒有任何立即購買按鈕。如果你正在改變plunkr，那麼請更新這個問題。 –

@Ujjwalkaushik：不工作，在步驟3中，它應該顯示爲紅色，但它顯示爲藍色，這是一個問題。 – user1513857

問題

問題在於JavaScript中的深拷貝和淺拷貝。當你將一個對象推入數組時，它並不真正創建對象的副本並推送它，而只是存儲對原始對象的引用（在您的案例中爲$ scope.specifications）。由於您正在更改控制器中的$ scope.specifications對象，因此您的數組也正在發生更改。

解決方案

你可以利用它來創建一個對象的深層副本的angular.copy方法。所以你可以做的是在將對象推送到數組之前，你可以創建對象的深層副本，然後將其推送到數組。

在您的服務，您正在推動的對象數組進行此更改

checkoutProductList.push(angular.copy(specs));

全業務

app.service ('checkoutService', function(){ 
    var checkoutProductList=[]; 
    this.setCheckoutProductList = function (specs){ 
    checkoutProductList.push(angular.copy(specs)); 
    window.alert(checkoutProductList.length); 
    window.alert(JSON.stringify(checkoutProductList)); 
}

我還創建了一個plunkr證明有效的解決方案。你可以看到它here。

來源

2016-10-16 17:12:52

感謝Pratik的解釋和解決方案。 – user1513857

範圍變量更新的變更服務變量

回答

相關問題