Изменение CSS динамической кнопки при нажатии

Question

У меня есть несколько кнопок, которые динамически помещаются в ng-repeat. Я хочу иметь возможность «выбрать» кнопку. Под этим я имею в виду, когда я нажимаю на один, его 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

Добавлена ​​еще одна ручки с другим случаем использования в нг-классе, который я думаю, это немного чище:

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 от контроллера (рассматривать как плохой шаблон).

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: Для поддержания одного 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 
}