嵌套 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}}

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

您能否指导我了解这里可能出现的问题？有没有更好的方法来实现我在这里想要做的事情？我需要捕获每个 selected 选项的值并将其添加到 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

我给你举了个例子。我认为您必须根据主要对象的功能修改它。关键是在输入 radio

中使用 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

你可以把单选按钮的"name" 属性去掉，然后用它们的型号来引用它们。

这对我有用。

嵌套 ng-repeat 中的单选按钮

Radio buttons in nested ng-repeat

javascript

radio-button

angularjs

angularjs-ng-repeat

angularjs-ng-model