ng-repeat добавить условный класс к одному элементу

Question

Я создаю приложение простой викторины, и я хочу добавить correct или wrong класс в элемент внутри ng-repeat для стилизации CSS.

JS:

$scope.checkAnswer = function (answer) { 
 
     if (answer == $scope.answer) 
 
     { 
 
      $scope.score++; 
 
      $scope.correctAns = true; 
 
      $scope.nextQuestion(); 
 
      
 
     } else { 
 
      $scope.correctAns = false; 
 
     } 
 
    };

Я пытался использовать ng-class выражение не повезло:

<ul id="options"> 
 
    <li ng-repeat="option in options" id="answer_{{$index}}" ng-class="{'correct' : correctAns, 'wrong' : !correctAns}"> 
 
    <img data-id="{{$index}}" ng-src="{{img[$index]}}" ng-click="checkAnswer({{$index}})"> 
 
    </li> 
 
</ul>

Это условное правопреемников "правильный" ко всем элементам в мой список. Я хочу добавить этот класс только к тому, который действительно правильный.

Answer 1

«ng-repeat» - директива использует атрибут «изолированный объем», что означает, что он изменяет вашу примитивную переменную «correctAns», а затем пытается изменить ее из локальной области действия, значение родительской области не будет изменено. У вас есть следующее решение: Не используйте элементарное значение, используйте object.property вместо этого - в вашем случае это может быть answer.correct

Пожалуйста, проверьте подробный ответ ниже: Directive isolate scope with ng-repeat scope in AngularJS

Answer 2

Это мой пример базируется на как я понимаю это требование. Надеюсь, это поможет.

https://jsfiddle.net/5zoh6L7d/

У меня есть «класс» информация для каждого варианта, как эти:

$scope.options = [ 
    {key: 1, value: "Earth", class: ""}, 
    {key: 2, value: "Fire", class: ""}, 
    {key: 3, value: "Air", class: ""}, 
    {key: 4, value: "Water", class: ""}, 
    ]; 

Когда пользователь выбирает ответ, я проверить его и изменить «класс» из выбранного ответа.