ng-repeat中的md-radio-group

时间:2016-03-18 23:54:19

标签: angularjs angularjs-ng-repeat ng-repeat angular-material radio-group

我正在整理调查问卷。每个问题都插入一个ng-repeat,每个问题都有多个选项。我使用角度材料的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) {
});

1 个答案:

答案 0 :(得分:1)

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

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