Angularjs 离子角度指令更新无线电场

我在ionic应用程序中设置了一个单选按钮，代表一组测试问题的答案

控制器：

$scope.question = {
 answers: [
   {
     id:  21,
     answer: "Chicago"
   },
   {
    id: 22,
    answer: "New York"
   },
   {
    id: 23,
    answer: "Los Angeles"
  }
]};

此文件以HTML格式显示：

  <ion-radio ng-repeat="answer in question.answers"
             ng-value="answer.id"
             ng-model="answerData.selectedAnswer"
            class="radio-positive">
    {{ answer.answer }}
  <div class="radio-right">{{some_scope_value[answer.id]}}</div>
  </ion-radio>

{{answer.answer}
{{some_scope_value[answer.id]}

假设问题是“加利福尼亚州的哪个城市”，如果选择了，我想用“正确”来突出显示无线电选项。如果选择了其他答案中的一个，我希望将其标记为“错误”，将正确答案标记为“答案”。它们应位于右侧并在同一条线上，使用此div：

<div class="radio-right">{{Correct!" || "Wong" || "Answer}}{{some_scope_value[answer.id]}}</div>

{{Correct！”||“Wong”| | |“Answer}{{{some_scope_value[Answer.id]}

我的问题是：这是否需要一个指令来访问“some_scope_value[answer.id]”？？我意识到[answer.id]括号是不合法的。我只是演示了如何基于answer.id访问该字段

更新：因此，如果用户选择“芝加哥”或“纽约”，则“芝加哥”或“纽约”旁边应显示“错误”一词，并且在“洛杉矶”旁边应显示“这是正确答案”

但如果用户选择“Los Angeles”，则“CORRECT！”应显示在“Los Angeles”旁边，其他两行上不应显示任何内容

---

此外，这一切都应该在点击按钮时发生，而不是在选择答案时发生（这样用户可以在提交答案之前改变主意）。

不，您不需要指令来实现这一点。

要实现这一点，您可以通过不使用索引（数组/对象）简化答案结果处理。您可以使用、

ng class

、

ng show

或

ng if

来查看正确答案

控制器 看法 物体的不同处理- 看法

{{问题.答案}
正确答案！！！
回答错误！！！

您不需要指令。您可以这样做：

控制器：

$scope.question = {
 answers: [
   {
     id:  21,
     answer: "Chicago"
   },
   {
     id: 22,
     answer: "New York"
   },
   {
     id: 23,
     answer: "Los Angeles"
   },
 correct_id: 21    
]};

<ion-radio ng-repeat="answer in question.answers"
         ng-value="answer.id"
         ng-model="answerData.selectedAnswer"
        class="radio-positive">
{{ answer.answer }}
<div class="radio-right" ng-show="answerData.selectedAnswer == question.correct_id">Right!</div>
</ion-radio>

查看：

$scope.question = {
 answers: [
   {
     id:  21,
     answer: "Chicago"
   },
   {
     id: 22,
     answer: "New York"
   },
   {
     id: 23,
     answer: "Los Angeles"
   },
 correct_id: 21    
]};

<ion-radio ng-repeat="answer in question.answers"
         ng-value="answer.id"
         ng-model="answerData.selectedAnswer"
        class="radio-positive">
{{ answer.answer }}
<div class="radio-right" ng-show="answerData.selectedAnswer == question.correct_id">Right!</div>
</ion-radio>

{{answer.answer}
正确的！

我更新了问题，以便更清楚地了解如何在选项旁边显示结果。通过硬编码“Chicago”，你的答案并没有告诉我如何做我需要的事情。但这是承诺。@Lilbuitch，请检查我答案底部的“lodash”部分。这就是如何在非关联数组中选择正确答案的方法。不建议在JavaScript中处理关联数组。否则，您可以使用类似

$scope.answers{22:true，23:false，1235:false}

@lilbackise的对象。我添加了3个示例来处理这个问题。一种方法成功了吗？请查看问题更新以了解更多详细信息。ansers对象来自服务器，我不想在其中包含任何问题数据。我的问题对象中已经有正确的答案ID。选择正确答案后，这将在所有三个答案旁边显示“Right！”。

 <div ng-repeat="(questionId, question) in questions.answers">
    <label>
      <input type="radio" ng-model="selectedValue.answerId" value="{{ questionId }}"> {{ question.answer }}
      <span style="color:green;" ng-show="questionId === selectedValue.answerId && questions.answers[selectedValue.answerId].right === true"> Right answer!!! </span>
      <span style="color:red;" ng-show="questionId === selectedValue.answerId && questions.answers[selectedValue.answerId].right !== true"> Wrong answer!!! </span>
      <br/>
    </label>
  </div>

$scope.question = {
 answers: [
   {
     id:  21,
     answer: "Chicago"
   },
   {
     id: 22,
     answer: "New York"
   },
   {
     id: 23,
     answer: "Los Angeles"
   },
 correct_id: 21    
]};

<ion-radio ng-repeat="answer in question.answers"
         ng-value="answer.id"
         ng-model="answerData.selectedAnswer"
        class="radio-positive">
{{ answer.answer }}
<div class="radio-right" ng-show="answerData.selectedAnswer == question.correct_id">Right!</div>
</ion-radio>