ng-repeat 中的 md-radio-group

md-radio-group within ng-repeat

我正在整理一份问卷。每个问题都插入一个 ng-repeat,每个问题都有多个选择项。我使用 angular material 的 md-radio-group 将这些多项选择项作为单选按钮插入。 选择问题 1 中的三个单选按钮之一反映了以下所有问题。感谢任何帮助。

更新:我创建了一个重复问题的 CodePen。发现于:

My CodePen

<div class="main" ng-app="MyApp">

<div ng-controller="AppCtrl as asaq">

<h1>{{ asaq.title }}</h1>

<form name="collection" novalidate>

    <div class="questionnaire">

        <div class="questions">

            <div class="question" ng-repeat="question in asaq.questions">
                <h2>Question {{ question.hrsQuestionOrderNumber }} <span>of {{ asaq.questions.length }}</span></h2>
                <p>
                    {{ question.descriptionLong }}
                </p>

                <div class="options">
                    <md-radio-group ng-model="asaq.answers.group">
                      <md-radio-button ng-repeat="option in question.choiceModels" ng-value="option.description254" required>
                             {{ option.description254 }}
                      </md-radio-button>
                    </md-radio-group>
                </div>
            </div>

        </div>

    </div>

</form>

</div>

</div>

Javascript:

angular
  .module('MyApp',['ngMaterial', 'ngMessages'])
  .controller('AppCtrl', function() {

var self = this;
self.title = 'md-radio-group within ng-repeat';

self.questions = [
      {
        "hrsQuestionOrderNumber": 1,
        "descriptionLong": "Do you collect money from anyone?",
        "choiceModels": [
          {
            "description254": "Yes"
          },
          {
            "description254": "No"
          },
          {
            "description254": "None / Not applicable",
          }
        ]
      },
      {
        "hrsQuestionOrderNumber": 2,
        "descriptionLong": "Are pre-numbered receipts given to the person paying money?",
        "choiceModels": [
          {
            "description254": "Yes"
          },
          {
            "description254": "No",
          },
          {
            "description254": "None / Not applicable"
          }
        ]
      },
      {
        "hrsQuestionOrderNumber": 3,
        "descriptionLong": "Do cash receipts or logs contain sufficient detail to accurately describe the nature of the transaction?",
        "choiceModels": [
          {
            "description254": "Yes"
          },
          {
            "description254": "No"
          },
          {
            "description254": "None / Not applicable"
          }
        ]
      },
      {
        "hrsQuestionOrderNumber": 4,
        "descriptionLong": "Do receipts or logs identify individuals and not groups of individuals?",
        "choiceModels": [
          {
            "description254": "Yes"
          },
          {
            "description254": "No"
          },
          {
            "description254": "None / Not applicable"
          }
        ]
      },
      {
        "hrsQuestionOrderNumber": 5,
        "descriptionLong": "For money collected, is it always deposited and never used for purchases?",
        "choiceModels": [
          {
            "description254": "Yes",
          },
          {
            "description254": "No"
          },
          {
            "description254": "None / Not applicable"
          }
        ]
      },
      {
        "hrsQuestionOrderNumber": 6,
        "descriptionLong": "For money not yet deposited, is it kept in a secure location?",
        "choiceModels": [
          {
            "description254": "Yes"
          },
          {
            "description254": "No"
          },
          {
            "description254": "None / Not applicable"
          }
        ]
      },
      {
        "hrsQuestionOrderNumber": 7,
        "descriptionLong": "Do you keep a file of original deposit documentation—including cash receipts or logs—together?",
        "choiceModels": [
          {
            "description254": "Yes"
          },
          {
            "description254": "No"
          },
          {
            "description254": "None / Not applicable"
          }
        ]
      }
    ];

})
.config(function($mdIconProvider) {
});

您正在使用同一个 scope 变量来存储所有答案。每个答案都需要单独的变量。那么看看这支笔吧。我刚刚添加了一个字段来将答案存储在 questions 对象中。

http://codepen.io/next1/pen/vGxEgX