У меня есть несколько кнопок, которые пользователь может щелкнуть в ответ на вопрос. Некоторые из кнопок являются правильными ответами, а другие неверны. Если кнопка является неправильным ответом, кнопка остается в режиме реального времени, но счетчик увеличивает счет неверных ответов. Если кнопка является правильным ответом, я хочу увеличить правильное количество ответов, изменить стиль кнопки и отключить кнопку. Фрагмент кода (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>
Фрагмент кода (контроллер):
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="answer1"
, ng-disabled="answer2"
, $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