クリック時の動的ボタンのCSSを変更する

Question

ng-repeatに動的に配置された2つのボタンがあります。ボタンを「選択」できるようにしたい。それは私が1つをクリックすると、そのCSSが変化するということです。別のボタンをクリックすると、最初のボタンが元のCSSに戻り、新しいボタンが選択されます。誰か助けてくれますか？

HTML：

<button ng-repeat="answer in regular_answers" ng-attr-id="{{'answer' + answer.regularAnswerId}}" class="button button-balanced button-block" ng-click="selectAnswer(answer)"> 
     {{answer.answer}} 
</button> 

JS：

$scope.selectAnswer = function (answer) { 
    if (document.getElementById('answer' + answer.regularAnswerId).hasClass('button-selected')) { 
     document.getElementById('answer' + answer.regularAnswerId).removeClass('button-selected'); 
     document.getElementById('answer' + answer.regularAnswerId).addClass('button-balanced'); 
    } 
    else { 
     document.getElementById('answer' + answer.regularAnswerId).removeClass('button-balanced'); 
     document.getElementById('answer' + answer.regularAnswerId).addClass('button-selected'); 


    } 
    } 

Answer 1

あなたが角度を使用すると、アプローチがあなたの代わりに、ノードは、データ変更に対応する必要があり、イベント後にノードを変更ドント、異なっている必要があります。

<button ng-repeat="answer in regular_answers" class="button button-block" 
    ng-click="selectAnswer(answer)" 
    ng-class = "{buttonSelected:answer.regularAnswerId == selectedAnswer.regularAnswerId, 
      buttonBalanced: answer.regularAnswerId != selectedAnswer.regularAnswerId}"> 
     {{answer.answer}} 
</button> 

そして：

$scope.selectAnswer = function (answer) { 
    $scope.selectedAnswer = answer; 
} 

この例を参照してください：http://codepen.io/sergio0983/pen/vyYNvy

EDIT

は、私は少しクリーナーだと思うNG-クラスの異なるユースケースで別のペンを追加しました：

http://codepen.io/sergio0983/pen/VmweLP

<button ng-repeat="answer in regular_answers" 
class="button button-block" 
ng-click="selectAnswer(answer)" 
ng-class = "answer.regularAnswerId == selectedAnswer.regularAnswerId ? 'button-selected' : 'button-balanced'"> 

Answer 2

使用ng-classディレクティブの代わりに、（悪いパターンとみなす）コントローラからDOMの操作を行っています。

マークアップ

<button ng-repeat="answer in regular_answers" 
    ng-attr-id="{{'answer' + answer.regularAnswerId}}" 
    class="button" 
    ng-class="{'button-selected': answer.isSelcted, 'button-balanced': answer.isSelcted}" 
    ng-click="answer.isSelected = !answer.isSelected"> 
     {{answer.answer}} 
</button> 

---

PS：あなたは、単一のスコープ変数の内側にそれを保存しなければならない独身IDを維持するための 。

<button ng-repeat="answer in regular_answers" 
    ng-attr-id="{{'answer' + answer.regularAnswerId}}" 
    class="button" 
    ng-class="{answer.regularAnswerId == selectedAnswerId ? 'button-selected': 'button-balanced'}" 
    ng-click="selectAnswer(answer)"> 
     {{answer.answer}} 
</button> 

コード

$scope.selectAnswer = function(answer){ 
    $scope.selectedAnswerId = answer.regularAnswerId 
}