Question

我是棱角分明的新手，我遇到了一个问题，我在ng-repeat中有一个嵌套的ng-repeat，如下所示：

<div ng-repeat="question in main.questions">
                <div class="row">
                        <br/><span>Q{{$index+1}}. {{question.Ques.questiontxt}}</span>
                </div>
                <div ng-repeat="answer in question.Answer">
                        <input type="radio" name="question{{$parent.$index}}" value="{{answer.answertxt}}{{$parent.$index}}"/>         {{answer.answertxt}}
                </div>
</div>

这里，main.questions是一系列问题。对于每个问题，有多个选项通过第二个ng-repeat块迭代。但是，当我尝试使用ng-model作为单选按钮输入时，如下所示：

<input type="radio" name="question{{$parent.$index}}" value="{{answer.answertxt}}{{$parent.$index}}" ng-model="main.formData"/> {{answer.answertxt}}

，我只能为所有问题选择一个选项（理想情况下应该能够为每个问题选择1个选项）。当我不使用ng-model时，我可以为每个问题选择一个选项（应该如此），但无法捕获所选输入的值。

你能指导一下这里可能出现的问题吗？有没有更好的方法来实现我在这里尝试做的事情？我需要捕获每个选定选项的值并将其添加到JSON对象。

Answer 1

点击此处：plunkerCode

<div ng-repeat="question in questions">
    <div class="row">
        <br/><span>Q{{$index+1}}. {{question.questiontxt}}</span>
    </div>
    <div ng-repeat="answer in question.Answer">
       <input type="radio" 
          name="question{{$parent.$index}}" 
          ng-value="{{answer.answertxt}}{{$parent.$index}}"/> 
            {{answer.answertxt}}
    </div>
</div>

我试图模拟你的代码。

Answer 2

我为你做了一个例子。我认为您必须在主要对象的功能中修改它。关键是在输入无线电中使用ng-value和ng-model

function testCtrl($scope) {

  $scope.main = {};
  $scope.main.questions = [{
    Ques: {
      questiontxt: 'Question 1'
    },
    Answer: [{
      answertxt: "option 11",
      value: false,
      values: [true, false]
    }, {
      answertxt: "option 12",
      value: false,
      values: [true, false]
    }]
  }, {
    Ques: {
      questiontxt: 'Question 2'
    },
    Answer: [{
      answertxt: "option 21",
      value: false,
      values: [true, false]
    }, {
      answertxt: "option 22",
      value: false,
      values: [true, false]
    }]
  }, ];
      
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <div ng-app>
      <div ng-controller="testCtrl">
          <div ng-repeat="question in main.questions">
    <div class="row">
      <br/><span>Q{{$index+1}}. {{question.Ques.questiontxt}}</span>
    </div>
    <div ng-repeat="answer in question.Answer">
      {{answer.answertxt}}
      <input type="radio" ng-value="true" ng-model="answer.value" />true
      <input type="radio" ng-value="false" ng-model="answer.value" />false
    </div>
  </div>
  


  {{main}}
         </div> 
    </div>

Answer 3

你可以拿出＆＃34;名称＆＃34;单选按钮的属性，并通过他们的模型引用它们。

这对我有用。

嵌套ng-repeat中的单选按钮

3 个答案: