iChido
iChido

Reputation: 4614

md-radio-group within ng-repeat

I am putting together a questionnaire. Each question is inserted with an ng-repeat and each questions has multiple choice items. I am inserting these multiple choice items as radio buttons using angular material's md-radio-group. Choosing one of those three radio buttons on question 1 reflects on all the following questions. Any help is appreciated.

Update: I created a CodePen that duplicates the problem. Found at:

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) {
});

Upvotes: 1

Views: 3016

Answers (1)

nextt1
nextt1

Reputation: 3988

You are using a same scope variable for storing all the answers. You need seperate variable for each answer. So take a look at this pen. I just added one more field to store answer in questions object.

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

Upvotes: 1

Related Questions