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

编辑

加入纳克级的不同使用情况下，我认为是有点清洁另一笔：

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： 为了维持单编号，你应该保持一个单一的范围内变化。

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