Question

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

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

因此，我的要求是：

如果选择了True单选按钮：
- answer.is_correct应为 true 对于错误的单选按钮
- answer.is_correct应为 false
如果选择了假单选按钮：
- answer.is_correct应为 false 对于假单选按钮
- answer.is_correct应为 true

以下是当前代码的片段，这是不正确的，因为如果用户返回编辑以前创建的问题（用于创建和编辑问题的表单使用相同的视图），则将正确的答案从True更改为False对于True选项，不会将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：

注意，我使用＆＃34; ng-change＆＃34;并且＆＃34;得到＆＃34;由于控制器

中的 controllerAs 语法而绑定到范围

<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

您似乎期望结果与AngularJS实际上的工作方式不同。根据您对问题的描述，您可以提到思考answer.is_correct不会改变。实际上，每次选择单选按钮时，answer.is_correct都会更改。

当ng-value =＆＃34; false＆＃34;
anwser.is_correct == false检查并answer.is_correction ==当ng-value =＆＃34; true＆＃34;检查。这是ng-model
的预期结果

要验证其工作原理，请访问AngularJS Docs on ng-value以及显示选择单选按钮时如何应用ng-model的示例。

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

Answer 3

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

Answer 4

经过几个小时的调查，我找到了解决方案。我在我的无线电输入中添加了一个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属性将更新适当地根据单选按钮的状态。

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

4 个答案:

控制器：

HTML：