2017-06-21 23 views
-1

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> 
+0

同じ結合、同じ効果。それぞれのボタンに新しい変数を使用するか、最初のボタンの 'classRed:value1'や2番目のボタンの' classRed:value2'のような異なる変数にクラスをバインドするだけです。 –

+0

'$ scope'変数がビュー全体で共有されているからです。 1を変更すると、すべてのバインディングで使用されます。 –

+0

ボタンがかなりあることを考えれば、可能であれば、私はむしろモジュール化されたソリューションを用意しています。 –

答えて

1

値を「ボタン」に区切ります。

はJavaScript

angular 
    .module('myapp', []) 
    .controller('testCtrl', function ($scope) { 

     $scope.button1 = { 
      value1: false, 
      value2: true, 
      value3: false 
     }; 

     $scope.button2 = { 
      value1: false, 
      value2: true, 
      value3: false 
     }; 

     $scope.colorChange = function (button) { 
      $scope.temp3 = $scope[button].value3; 
      $scope[button].value3 = $scope[button].value2; 
      $scope[button].value2 = $scope[button].value1; 
      $scope[button].value1 = $scope.temp3; 
     } 

    }); 

HTML

<button class="btn" ng-class="{classRed: button1.value1, classBlue: button1.value2, classYellow: button1.value3}" ng-click="colorChange('button1')"></button> 
<button class="btn" ng-class="{classRed: button2.value1, classBlue: button2.value2, classYellow: button2.value3}" ng-click="colorChange('button2')"></button> 

代替アプローチ

あなたはあまりにも多くのボタンがある場合は、ng-repeatを活用することができます。以下の例を参照してください。

はJavaScript

angular 
    .module('myapp', []) 
    .controller('testCtrl', function ($scope) { 

     $scope.buttons = [ 
      { 
       name: 'Button 1', 
       color: 'Red', 
       changeColor: changeColor 
      }, 
      { 
       name: 'Button 2', 
       color: 'Yellow', 
       changeColor: changeColor 
      } 
     ]; 

     function changeColor() { 
      // apply your logic to change the button color 
     } 

    }); 

HTML

<button class="btn" ng-repeat="button in buttons" ng-class="[('class' + button.color)]" ng-click="button.colorChange()"></button> 
+0

ありがとうございます、それは仕事を上手く行います。もちろん、後者のボタンにはbutton2が必要です。 –

+0

はい、申し訳ありません。私はそれを修正します。私はまた、(よりダイナミックな)代替アプローチを追加しました。 –

+0

それは実用的な解決策ですが、そのような状況に対処するために 'ディレクティブ'が部分的に導入されました。私は個人的にそれらを使用することを提案します。ディレクティブアプローチの私の答えを見てください。 –

0

は実際に、あなたはボタンの同じ変数を使用します。 2つの異なる変数を使用することができます。 $scopeバインディングは全体のコントローラのために共有されている

angular.module('myapp', []).controller('testCtrl', function($scope) { 
 
    $scope.button1 = 2; 
 
    $scope.button2 = 1; 
 

 
    $scope.colorChange = function(b) { 
 
     if(b == 'b1') $scope.button1++; 
 
     if(b == 'b2') $scope.button2++; 
 
    } 
 

 
});
.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; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myapp" ng-controller="testCtrl"> 
 
    <button class="btn" ng-class="{classRed:button1 % 3 == 1, classBlue:button1 % 3 == 2, classYellow:button1 % 3 == 3}" ng-click="colorChange('b1')"></button> 
 
    <button class="btn" ng-class="{classRed:button2 % 3 == 1, classBlue:button2 % 3 == 2, classYellow:button2 % 3 == 3}" ng-click="colorChange('b2')"></button> 
 
</body>

0

は、あなたが別離を達成するために隔離スコープを持っている必要があります:それを行うには、いくつかの方法がありますが、ここでは一例であり、 。 AngularJs Directiveは、あなたがしようとしているものを提供する最良の方法です。

/* ANGULAR */ 
 
angular 
 
    .module('app', []) 
 
    .directive('buttonDirective', buttonDirective) 
 

 
function buttonDirective() { 
 
    return { 
 
    restrict: "E", 
 
    scope: {}, 
 
    controller: function($scope) { 
 

 
     $scope.value1 = false; 
 
     $scope.value2 = true; 
 
     $scope.value3 = false; 
 

 
     $scope.colorChange = function() { 
 
     console.log('change'); 
 
     $scope.temp3 = $scope.value3; 
 
     $scope.value3 = $scope.value2; 
 
     $scope.value2 = $scope.value1; 
 
     $scope.value1 = $scope.temp3; 
 
     } 
 
    }, 
 
    template: '<button class="btn" ng-class="{classRed:value1, classBlue:value2, classYellow:value3}" ng-click="colorChange()"></button>' 
 
    }; 
 
}
.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; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" id="console-log"> 
 

 
    <button-directive></button-directive><br/> 
 
    <button-directive></button-directive><br/> 
 
    <button-directive></button-directive><br/> 
 
    <button-directive></button-directive><br/> 
 
    <button-directive></button-directive> 
 

 
</div>

関連する問題