Изменение изменения области видимости переменной обслуживания

Может кто-нибудь, пожалуйста, взгляните ниже на плункер?Изменение изменения области видимости переменной обслуживания

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

})

ГОЛОВА

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 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 не такой, как код, который вы указали. У вас нет кнопки Buy Now в plunkr. Если вы меняете 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

Изменение изменения области видимости переменной обслуживания

ответ

Смежные вопросы