Ändern Sie CSS der dynamischen Schaltfläche auf klicken

Question

Ich habe ein paar Schaltflächen, die dynamisch in einer ng-Wiederholung platziert werden. Ich möchte in der Lage sein, eine Schaltfläche auszuwählen. Damit meine ich, wenn ich auf eins klicke, ändert sich dessen CSS. Wenn ich auf eine andere Schaltfläche klicke, erhält die erste Schaltfläche ihr ursprüngliches CSS zurück und die neue Schaltfläche wird ausgewählt. Kann mir jemand helfen?

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

Wenn Sie Winkel verwenden, sollte der Ansatz anders sein, eröffnen Sie bitte ein Knoten nach einem Ereignis ändern, sondern der Knoten Datenänderungen reagieren soll:

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

Und dann:

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

Sehen Sie folgendes Beispiel: http://codepen.io/sergio0983/pen/vyYNvy

EDIT

Added ein weiterer Stift mit einem anderen Anwendungsfall von ng-Klasse, die ich denke, ein sauberer Bit ist:

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

Verwendung ng-class Direktive statt DOM-Manipulation von der Steuerung zu tun (wie schlechte Muster betrachtet).

Markup

<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: Für einzelne Id Aufrechterhaltung Sie es in einem einzelnen Bereich Variable erhalten soll.

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

-Code

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