Angular - 根据状态动态设置绑定到单选按钮的对象的模型属性

Question

我试图弄清楚如何根据单选按钮的状态动态设置绑定到单选按钮的对象的模型属性。

为了提供一些上下文，该页面正在为测验创建一个 True/False 问题，其中一个单选按钮代表 True，一个单选按钮代表 False。我希望单选按钮的对象属性根据其状态进行更改。这样做的原因是因为该值与模型中的 answer.is_correct 相关联，这是一个布尔值，指示哪个答案是正确的。如果所问的问题是真的，那么正确的选项应该是 True。但是如果被问到的问题是假的，那么正确的选项应该是假的。

因此，我的要求是：

1. 如果选择了 True 单选按钮：

   • answer.is_correct 对于 True 单选按钮应该是 true
   • answer.is_correct 对于 False 单选按钮应该是 false

2. 如果选择了 False 单选按钮：

   • answer.is_correct 对于 True 单选按钮应该是 false
   • answer.is_correct 对于 False 单选按钮应该是 true

这是当前代码的 sn-p，这是不正确的，因为如果用户返回编辑之前创建的问题（创建和编辑问题的表单使用相同的视图），将正确答案从 True对于 True 选项，to False 不会将 answer.is_correct 设置为 false。相反，True 和 False 选项都将 answer.is_correct 设为 true，这不是我想要的。

  <div ng-repeat="answer in question.answers" class="answer">
    <label>
      <input type="radio" ng-value="true" name="true_false_choice" ng-model="answer.is_correct">
      {{answer.choice}}
    </label>
  </div>

Answer 1

I had a similar problem in AngularJS and here is the angular version of mannykary solution.

控制器：

使用 controllerAs，我使用 vm 作为绑定范围的表示

function setTrueFalseRadioState(answer) {
     angular.forEach(vm.files, function (a) {
        if (a.IsMyChoice !== answer.IsMyChoice) {
            a.IsMyChoice = false;
        }
     });
 };

 vm.setTrueFalseRadioState = setTrueFalseRadioState;

html:

注意，由于控制器中的 controllerAs 语法，我使用“ng-change”和“get”绑定到范围

<input type="radio"
           id="isChoice_{{$index + 1}}"
           name="response"
           ng-value="{{$index + 1}}"
           ng-required="!file.IsMyChoice"
           ng-change="get.setTrueFalseRadioState(file)"
           data-ng-model="file.IsMyChoice" />

Answer 2

经过数小时的调查，我找到了解决方案。我在我的单选输入中添加了一个 ng-change 指令，该指令将调用控制器中的一个函数来将另一个单选按钮的值设置为 false。

在控制器中（注意我在 Underscore.js 中使用each 方法，但您可以类似地使用标准 for 循环进行迭代）：

$scope.setTrueFalseRadioState = function (answer) {
  _.each(question.answers, function (a) {
    if (a.choice !== answer.choice) {
      a.is_correct = false;
    }
  });
};

我在输入标签中添加了ng-change 属性：

<input type="radio" name="true_false_choice" ng-model="answer.is_correct"
       ng-value="true" ng-change="setTrueFalseRadioState(answer)">

通过这样做，用户现在可以返回到之前创建的问题并编辑问题（通过将正确答案从 True 更改为 False，反之亦然），is_correct 属性将根据关于单选按钮的状态。

Answer 3

也许只有一个问题应该知道正确答案。 你可以有 n 个答案，如果 n.id = question.answer，那么你就有一个匹配项。

Answer 4

您似乎期望的结果与 AngularJS 实际工作的结果不同。从您对问题的描述中，您暗示认为 answer.is_correct 不会改变。实际上，每次选择单选按钮时 answer.is_correct 都会发生变化。

anwser.is_correct == false 当 ng-value="false" 被选中， answer.is_correction == true 当 ng-value="true" 被选中。这是 ng-model 的预期结果

要验证这是如何工作的，请访问AngularJS Docs on ng-value 和那里的示例，该示例向您展示了在选择单选按钮时如何应用 ng-model。

您需要针对 ng-click 函数进行一些后端编码，以确定是否选择了正确答案。