在递归循环中预定义值设置为单选按钮在AngularJS中失败

时间:2015-05-24 08:54:17

标签: html angularjs

我正在尝试准备一个在线试卷编辑器,并在将现有问卷详细信息填充到表单时遇到了与设置单选按钮值相关的问题。

这是用于填充表单的JSON响应格式。我使用嵌套的ng-repeat来进行处理,效果很好。导致元素的唯一问题是选择正确答案的无线电选项。

 "questions": [
    {
      "question_num": "Q1",
      "answersList": [
        {
          "is_correct": "0",
          "answer_text": "Answer 1",
          "feedback": "Feedback 1"
        },
        {
          "is_correct": "0",
          "answer_text": "Answer 2",
          "feedback": "Feedback 2"
        },
        {
          "is_correct": "0",
          "answer_text": "Answer 3",
          "feedback": "Feedback 3"
        },
        {
          "is_correct": "1",
          "answer_text": "Answer 4",
          "feedback": "Feedback 4"
        }
      ],
      "question_text": "Sample Question"
    }
 ]

这是HTML视图详细信息。

<div ng-repeat="answer in question.answersList track by $index">
    <input type="radio" value="{{answer.is_correct}}" ng-model="answer.is_correct" name="$index">
    <input type="text" class="desc-text" value="{{answer.answer_text}}" ng-model="answer.answer_text">
    <input type="text" class="desc-text" value="{{answer.feedback}}" ng-model="answer.feedback">
</div>

在预期的解决方案中,应在is_correct = 1时检查单选按钮 我怎样才能做到这一点?

1 个答案:

答案 0 :(得分:1)

我设法通过对代码进行以下更改来解决问题。

<input type="radio" name="{{$parent.$index}}" ng-value="1" ng-model="answer.is_correct">

由于应在答案列表中为每个答案分组无线电选项,我们可能需要根据问题索引对它们进行子分组。因此必须使用name="{{$parent.$index}}"

为了预先选择问题的正确答案,使用ng-value="1"作为我的数据集返回1和0作为值。这可以设置为真/假等。

为了管理与所选输入的双向数据绑定,数据模型更改为ng-model="answer.is_correct"。如果在这种情况下没有改变或新的选择,这将继续现有的选择


希望这将有助于将来某人克服这种情况。