1
誰かがplunkerの下を見てみることができますか？範囲変数の更新サービス変数の変更
http://plnkr.co/edit/oTHJcVVzJE5CwMnFMEpS?p=preview
問題：スコープ変数「specifications.selectedColor」の変更は、すべての製品のselectedColorを変えるすなわち、他の製品の仕様を上書きしています。
再現手順： 1）[今すぐ購入]をクリックします。 checkoutProductList [0] .selectedColorが赤に設定されています。 2）ドロップダウンから青色を選択します。 3）今すぐ購入をクリックします。 checkoutProductList [0] .selectedColorが青に設定されています。
ここをクリックしてもう一度（上記の手順3）をクリックすると、checkoutProductList Arrayの別の製品、つまりcheckoutProductList [1]が追加されます。 checkoutProductList [0] .selectedColorをRedからBlueに変更しないでください。
各製品の仕様を個別に保つにはどうすればよいですか？
コード： Contoller
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>
私のために働いています –
あなたのplunkrは、あなたが示したコードと同じではありません。 plunkrにBuy Nowボタンはありません。 plunkrを変更している場合は、同様に質問を更新してください。 –
@Ujjwalkaushik：動作していません。手順3では、色は赤色で表示されますが、色は青色で表示されていますが問題です。 – user1513857