单击更改动态按钮的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

使用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 
}

Answer 2

当使用angular时，方法应该有所不同，不要在事件发生后更改节点，而是，该节点应响应数据更改：

<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

编辑

我添加了另一支具有ng-class用例的笔，我认为它更干净：

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