javascript - 使用 Angular ng-repeat 验证表单有效性

Question

我有一个 Angular 表单正在解析一些 JSON 数据。
我正在使用 ng-repeat 进行渲染。但是，我遇到的问题是，当选择每个组中的单选按钮时，表单永远不会变得有效。

我怀疑问题出在每个输入中的ng-model，但我似乎无法找出动态创建的正确方法ng-model 位于 ng-repeat 内。

表单 block 代码:

<form name="posttestForm">
  <alert ng-repeat="alert in alerts" 
         type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
  <div class="well question-well" ng-repeat="question in questions">
    <p>
      <strong>{{question.question}}</strong>
    </p>
    <ul>
      <li ng-repeat="answers in question.answers">
        <input ng-model="Q[question.id]" 
               type="radio" name="Q{{question.id}}" value="{{answers.id}}" 
               required="" data-key="{{answers.isCorrect}}" />{{answers.answer}}
      </li>
    </ul>
  </div>
  <button type="submit" class="btn btn-primary" ng-click="EvaluatePosttest(3)" 
          ng-show="!TestPassed">
    Submit Questions</button>
</form>

这是一个 Plunkr，它显示动态代码并演示当选择每个组中的单选按钮时表单永远不会变为有效。

http://plnkr.co/edit/HQGPIOCdn3TGlE96CpK5?p=preview

这是一个使用静态内容的 Plunkr，显示其工作情况。

http://plnkr.co/edit/ZFt2VnBfaQjuu73kaNQJ?p=preview

Answer 1

只需将其添加到您的 javascript Controller

$scope.Q = [undefined,undefined,undefined,undefined,undefined,undefined];

解释:您将 ng-model 设置为 Q[question.id] 但 Q 未定义，因此 ng-model 将永远无法工作。您始终必须初始化 Controller 中的变量。它无法初始化的唯一情况是当您执行以下操作时: ng-model="测试"

如果你这样做

ng-model="test.test"
ng-model="test[0]"

如果未正确初始化，它将永远无法工作。