更改用户单击的单选按钮旁边的跨度类别

Question

我使用Angular.js为一些选择题提供了一些反馈。我试图在用户点击的单选按钮旁边显示反馈，但由于ng-repeat，我似乎只能在每个单选按钮后显示它。所以我认为最好的选择是隐藏所有的反馈，并且改变用户点击旁边的跨度类，但我不知道如何去做。

这是我到目前为止有：

HTML：

<form name="myForm" ng-controller="testController" ng-submit="submit()"> 

    <div ng-repeat="question in questions"> 

    <div>{{question.Question}}</div> 

    <input type="radio" ng-model="selected[$index]" value="A" name="{{question.id}}" />{{question.A}} 
    <span class="hide">{{feedback[$index]}}</span><br /> 

    <input type="radio" ng-model="selected[$index]" value="B" name="{{question.id}}" />{{question.B}} 
    <span class="hide">{{feedback[$index]}}</span><br /> 

    <input type="radio" ng-model="selected[$index]" value="C" name="{{question.id}}" />{{question.C}} 
    <span class="hide">{{feedback[$index]}}</span><br /> 

    <input type="radio" ng-model="selected[$index]" value="D" name="{{question.id}}" />{{question.D}} 
    <span class="hide">{{feedback[$index]}}</span><br /> 

    </div> 

    <input type="submit" value="Submit"> 

</form> 

脚本：

angular.module('nodeServerApp') 
.controller('testController', function ($scope) { 

$scope.questions = 
[ 
    { 
     "id": 0, 
     "Question": "Is C the right answer?", 
     "A": "This is choice A.", 
     "B": "This is choice B.", 
     "C": "This is choice C.", 
     "D": "This is choice D.", 
     "Answer": "C" 
    }, 
    { 
     "id": 1, 
     "Question": "Is A the right answer?", 
     "A": "This is choice A.", 
     "B": "This is choice B.", 
     "C": "This is choice C.", 
     "D": "This is choice D.", 
     "Answer": "A" 
    }, 
    { 
     "id": 2, 
     "Question": "Is D the right answer?", 
     "A": "This is choice A.", 
     "B": "This is choice B.", 
     "C": "This is choice C.", 
     "D": "This is choice D.", 
     "Answer": "D" 
    } 
]; 

$scope.selected = []; 
$scope.feedback = []; 

$scope.submit = function() { 

    if ($scope.selected.length < 3) { 
     alert("Please answer all questions."); 
    } 
    else { 
     for (var i = 0; i < 3; i++) { 
      if (angular.equals($scope.selected[i], $scope.questions[i].Answer) === false) { 
       $scope.feedback[i] = "Incorrect"; 
      } 
      else { 
       $scope.feedback[i] = "Correct"; 
      } 
     } 
    } 

}; 

}); 

Answer 1

使用ng-show显示旁边的选择答案反馈：

<input type="radio" ng-model="selected[$index]" value="A" name="{{question.id}}" />{{question.A}} 
<span ng-show='answers[$index] == "A"'>{{feedback[$index]}}</span> 

<input type="radio" ng-model="selected[$index]" value="B" name="{{question.id}}" />{{question.A}} 
<span ng-show='answers[$index] == "B"'>{{feedback[$index]}}</span> 

等