angular.jsを使用して複数のボタンの色を個別に変更したいと考えています。私は下のコードのおかげで、1つのボタンの色を変えることができましたが、ボタンを追加すると色が変わります。クリックしたボタンの色を変更するにはどうすればよいですか? ありがとうangular.jsを使用して複数のボタンの色を変更する
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<style type="text/css">
.classRed {background-color: red}
.classBlue {background-color: blue}
.classYellow {background-color: yellow}
.btn {
display:block;
height: 30px;
width: 30px;
border-radius: 50%;
border: none;
outline:none;
}
</style>
</head>
<body ng-app="myapp" ng-controller="testCtrl">
<button class="btn" ng-class="{classRed:value1, classBlue:value2, classYellow:value3}" ng-click="colorChange()"></button>
<button class="btn" ng-class="{classRed:value1, classBlue:value2, classYellow:value3}" ng-click="colorChange()"></button>
<br>
<script type="text/javascript">
angular.module('myapp',[]).controller('testCtrl', function($scope){
$scope.value1 = false;
$scope.value2 = true;
$scope.value3 = false;
$scope.colorChange = function(){
$scope.temp3 = $scope.value3;
$scope.value3 = $scope.value2;
$scope.value2 = $scope.value1;
$scope.value1 = $scope.temp3;
}
});
</script>
</body>
</html>
同じ結合、同じ効果。それぞれのボタンに新しい変数を使用するか、最初のボタンの 'classRed:value1'や2番目のボタンの' classRed:value2'のような異なる変数にクラスをバインドするだけです。 –
'$ scope'変数がビュー全体で共有されているからです。 1を変更すると、すべてのバインディングで使用されます。 –
ボタンがかなりあることを考えれば、可能であれば、私はむしろモジュール化されたソリューションを用意しています。 –