Question

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

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

表格块代码：

<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控制器中添加

即可

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

说明：您将ng-model设置为Q [question.id]，但Q未定义，因此ng-model不会工作。您始终必须在控制器中初始化变量。它无法初始化的唯一情况是： NG-模型=＆＃34;测试＆＃34;

如果你这样做

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

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

Answer 2

您可以在控制器中进行自定义表单验证。在你的情况下：

$scope.Q = [];
$scope.$watch('Q', function (Q) {
    $scope.posttestForm.$setValidity('count', Q.length >= $scope.questions.length);
}, true);

在其中，你可以做任何你想要的验证。

以下是工作人员：http://plnkr.co/edit/7Ww4fjJzkDjifPaZ2QtG?p=preview

使用Angular ng-repeat进行表单有效性

2 个答案: