generically disable multiple buttons based on evaluating value

Question

I have a a number of buttons that a user can click on in response to a question. Some of the buttons are correct answers, and others are incorrect. If the button is an incorrect answer, the button remains live, but a counter increments counting wrong answers. If the button is a correct answer, then I want to increment the correct answer count, change the button styling, and disable the button. Code snippet (html):

<div class="container" ng-controller="myCtrl">

  <div>
    Right answers: {{ right_answers }}
  </div>

  <div>
    Wrong answers: {{ wrong_answers }}
  </div>

  <button ng-style="answer1Style" ng-click="clickThis('answer1')" ng-disabled='answer1'> Answer1 </button>
  <button ng-style="answer2Style" ng-click="clickThis('answer2')" ng-disabled='answer2'> Answer2 </button>
  <button ng-style="answer3Style" ng-click="clickThis('answer3')" ng-disabled='answer3'> Answer3 </button>
  <button ng-click="clickThis('wrong1')" ng-disabled='wrong1'> Wrong1 </button>
  <button ng-click="clickThis('wrong2')" ng-disabled='wrong2'> Wrong2 </button>
  <button ng-click="clickThis('whatever')" ng-disabled='whatever'> Whatever </button>

</div>

Code snippet (controller):

var myCtrl = function($scope) {
  $scope.right_answers = 0;
  $scope.wrong_answers = 0;

  $scope.answers = ['answer1','answer2','answer3'];

  $scope.clickThis = function(answer) {
    if ($scope.answers.indexOf(answer) != -1) {
      $scope.right_answers += 1;
      switch(answer){
        case 'answer1': 
          $scope.answer1 = true;
          $scope.answer1Style = {'background-color':'green', 'color':'white'};
          break;
        case 'answer2': 
          $scope.answer2 = true;
          $scope.answer2Style = {'background-color':'green', 'color':'white'};
          break;
        case 'answer3': 
          $scope.answer3 = true;
          $scope.answer3Style = {'background-color':'green', 'color':'white'};
          break;
      };
    }
    else {
      $scope.wrong_answers += 1;
    };    
  };

};

My question is, is there a way to make this more generic, where I don't have to use a CASE and include a $scope for each individual answer in order to disable it (or change the style for that matter), i.e. ng-disabled="answer1", ng-disabled="answer2", $scope.answer1, $scope.answer2?

Thanks!

Andrii Iushchuk · Accepted Answer · 2015-09-28 18:59:00Z

1

You can pass $event object as argument of ngClick directive.

<button ng-click="clickThis($event, 'answer')"> Answer </button>

Then you will be able to do manipulations with target element in $scope.clickThis function

$scope.clickThis = function(event, answer) {
  if ($scope.answers.indexOf(answer) != -1) {
    $scope.rightAnswers += 1;
    element = angular.element(event.target);
    element.css({'color': 'white', 'background-color': 'green'});
    element.prop('disabled', true)
  } else {
    $scope.wrongAnswers += 1;
  };
}

Example: plnkr.co

answered Sep 28, 2015 at 18:59

Andrii Iushchuk

3761 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

generically disable multiple buttons based on evaluating value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related