javascript - 嵌套 ng-repeat 中的单选按钮

Question

我是 Angular 新手，我遇到了一个问题，我在 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

您可以取出单选按钮的“名称”属性并通过它们拥有的模型引用它们。

这对我有用。