【问题标题】:md-radio-group within ng-repeatng-repeat 中的 md-radio-group
【发布时间】:2016-07-05 21:39:18
【问题描述】:

我正在整理一份调查问卷。每个问题都插入一个 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) {
});

【问题讨论】:

  • 你也可以给你js文件吗?我需要查看您的objectslogic 的结构。
  • 感谢您的详细提问。
  • 你试过我的 naswer 了吗???

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


【解决方案1】:

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

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

【讨论】:

  • 是的,我做到了。看起来不错。问题,即使我在控制器中使用别名,我应该使用那个 ng-model 吗?别名是“asaq”。
  • 是的。这种方法没有任何问题。实际上,以这种方式对数据进行建模是件好事。
  • 优秀。非常感谢!
  • 没问题.. :)
猜你喜欢
  • 1970-01-01
  • 2018-03-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-02-21
  • 2017-05-13
相关资源
最近更新 更多