基于评估值一般禁用多个按钮

generically disable multiple buttons based on evaluating value

本文关键字：按钮 于评估 评估      更新时间：2023-09-26

我有一些按钮，用户可以点击它们来回答问题。有些按钮是正确答案，有些是不正确的。如果按钮是一个错误的答案，按钮仍然有效，但计数器增加计数错误的答案。如果按钮是正确答案，那么我想增加正确答案计数，更改按钮样式，并禁用按钮。代码片段(html):

<div class="container" ng-controller="myCtrl">
  <div>
    Right answers: {{ right_answers }}
  </div>
  <div>
    Wrong answers: {{ wrong_answers }}
  </div>
  <button ng-style="answerswer1Style" ng-click="clickThis('answer1')" ng-disabled='answer1'> Answer1 </button>
  <button ng-style="answerswer2Style" ng-click="clickThis('answer2')" ng-disabled='answer2'> Answer2 </button>
  <button ng-style="answerswer3Style" 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>

代码片段(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;
    };    
  };
};

我的问题是，有没有一种方法可以使这个更通用，在那里我不必使用CASE，并为每个单独的答案包括$作用域，以便禁用它(或为此更改样式)，即ng-disabled="answerswer1", ng-disabled="answerswer2", $scope.answer1, $scope.answer2 ?

谢谢!

可以将$event对象作为ngClick指令的参数。

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

然后你就可以在$scope.clickThis函数

中对目标元素进行操作了
$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;
  };
}

例子:plnkr.co

相关文章：