Change CSS of dynamic button on click

Question

I have a couple of buttons that are dynamically placed in an ng-repeat. I want to be able to "select" a button. By that I mean when I click on one, its CSS changes. When I click another one, the first button gets its original CSS back and the new button becomes selected. Can anyone help me out?

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');


    }
  }

Do you want to use a radio button group? Hide the buttons, show only their labels, style the labels depending on whether their button is selected e.g. input[type=radio]:checked + label ... uses no JavaScript to control presentation, then. — Lee Kowalkowski
– Lee Kowalkowski, Commented Nov 3, 2016 at 19:58

Pankaj Parkar · Accepted Answer · 2016-11-03 20:01:19Z

4

Use ng-class directive instead of doing DOM manipulation from controller(considered as bad pattern).

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: For maintaining single Id you should preserve it inside a single scope variable.

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

edited Nov 3, 2016 at 20:01

answered Nov 3, 2016 at 19:43

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ruben2112 Over a year ago

Thanks, this works for selecting them, but it doesn't get deselected when a different one is selected?

Pankaj Parkar Over a year ago

@Ruben2112 take a look at updated answer now, Thanks ;)

sergio0983 · Accepted Answer · 2016-11-03 20:05:20Z

When you use angular, the approach should be different, you don´t change the node after an event, instead, the node should respond to data changes:

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

And then:

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

See this example: http://codepen.io/sergio0983/pen/vyYNvy

EDIT

Added another pen with a different use case of ng-class that I think is a bit cleaner:

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

Collectives™ on Stack Overflow

Change CSS of dynamic button on click

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related