1

私は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 は質問の配列です。各質問には、2 番目の ng-repeat ブロックで反復される複数のオプションがあります。ただし、次のようにラジオボタン入力に ng-model を使用しようとすると:

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

、組み合わせたすべての質問に対して 1 つのオプションしか選択できません (理想的には、質問ごとに 1 つのオプションを選択できる必要があります)。また、ng-model を使用しない場合、質問ごとに 1 つのオプションを選択できますが (そうあるべきです)、選択した入力の値を取得できません。

ここで何が問題になるのか教えてください。私がここでやろうとしていることを達成するためのより良い方法はありますか? 選択した各オプションの値をキャプチャして、JSON オブジェクトに追加する必要があります。

4

3 に答える 3

0

私はあなたのために例を作りました。主なオブジェクトの機能でこれを変更する必要があると思います。キーは、入力ラジオで 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>

于 2015-03-03T17:24:32.243 に答える
0

ラジオボタンの「名前」プロパティを取り出して、それらが持っているモデルで参照することができます。

それは私のために働いた。

于 2016-01-27T22:48:59.663 に答える