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>

等

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

1 个答案: