0

This would be more easier question but I am stuck on some small simple thing: My angular object is like this: 

$scope.questions = [
  {
    questionText: "1. This is a test question#1",
    choices: [{
            id: 1,
            text: "NO",
            isUserAnswer: false
        }, {
            id: 2,
            text: "YES",
            isUserAnswer: true
        }]
  },
  {
    questionText: "2. This is a test question#2",
    choices: [{
            id: 1,
            text: "NO",
            isUserAnswer: false
        }, {
            id: 2,
            text: "YES",
            isUserAnswer: true
        }]
  }
];

Now I am trying to populate my frontend (jade/html) using this object so that I can have two radio buttons for each questions. My jade file is like this: 

div
  ul.unstyled
    li(ng-repeat='question in questions')
      strong.question {{question.questionText}}
      ul.unstyled(id='quest_{{$parent.$index}}')
        li(ng-repeat='choice in question.choices')
          label.(class='isCorrect_{{choice.selected}}', for='quest_{{$parent.$index}}_choice_{{$index}}')
            input(type='radio', id='quest_{{$parent.index}}_choice_{{$index}}', ng-model='choices[$parent.$index]', value='{{choice.text}}', name='quest_{{$parent.$index}}_choices', ng-click='showResult()')
            |  {{choice.text}}

Now I can see the questions and radio buttons on the html page but somehow I am unable to perform click on any of the button. Any obvious reason? Any help would be appreciated. It works perfect when I change to html file.

Pop-A-Stash
  • 6,572
  • 5
  • 28
  • 54
Tom
  • 1

1 Answers1

0

This is probably due to your ngModel definition:

ng-model='choices[$parent.$index]'

Choices is not defined. question.choices is, however:

ng-model='question.choices[$parent.$index]'

However, it seems what you really want is to use the question itself, not the choices as your model. And, you'll want to use a new property on the question, answer:

ng-model='question.answer'

Now when a choice is made, the question will have an answer property with the value of the selected answer:

{
  questionText: "2. This is a test question#2",
  answer: "YES",
  choices: [{
        id: 1,
        text: "NO",
        isUserAnswer: false
    }, {
        id: 2,
        text: "YES",
        isUserAnswer: true
    }]
}
Pop-A-Stash
  • 6,572
  • 5
  • 28
  • 54
  • Just to clarify more to this, I have $scope.choices = {} in my JS file. I figured out the problem, in this case ng-model='choices[$parent.$index]' the value of $parent.$index in javascript side always remain 0 and on html side it show correct value. Not sure how to retain the correct value over javascript. – Tom Mar 14 '18 at 14:51
  • Hello Pop-A-Stash, when I tried ng-model='question.answer', it works for first question only. If I tried to select the choices for second question it hits to question one only. Why my model is bounded to first question only. – Tom Mar 14 '18 at 19:27
  • You should build an example in plunkr or jsfiddle – Pop-A-Stash Mar 14 '18 at 19:47
  • Yes that works perfect but when I put this code into jade/html, ng-model='question.answer' or ng-model='choices[$parent.$index]' doesn't work correctly. If I have 4 questions and if I click YES/NO radio button of question 2,3, 4 it always selects question 1 only. – Tom Mar 14 '18 at 20:27