Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I am working on a QA app where i need to add multiple answers to a question as per requirement dynamically. for this in my form I have a question field , an answer field and a Boolean correct field to tell if the answer choice is correct or not. I have given a button add another answer which create a new answer field when clicked.I want to give ng-model name dynamically so that I can easily retrieve the value of ng-model.
For this I have created a controller which is like

app.controller('questionsCtrl', function ($scope) {
    $scope.question={};
    $scope.question.answers=[];
    $scope.answer_choices=[];
    var choice=1;

    $scope.addAnswerField=function(){
        $scope.answer_choices.push(choice);
         choice++;
    }

    $scope.addAnswerChoice=function(){
        $scope.question.answers.push({});
    }

});

My HTML code is:

<div class="container">
    <form ng-submit="createQuestion()">
    <textarea class="form-control" ng-model='question.question_text'></textarea>
    <textarea  class="form-control" ng-model="question.answer_choice_1"></textarea>
    <label class="checkbox-inline">
    <input type="radio" name="correct" ng-model="question.correct_1" /> 
        Correct
    </label>
    <div ng-repeat="choice in answer_choices">
    <textarea  class="form-control" ng-model="question.answers.$index[answer]">

    </textarea>
    <label class="checkbox-inline">
        <input type="radio" name="correct" ng-model = "question.answers.$index[correct]" /> 
    </label>
    </div>
    <button  class='btn btn-primary' type="submit">Submit</button>
</form>
<button class="btn btn-default" ng-click="addAnswerChoice()">Add Answer</button>
</div>

I want to do something like when i add a new answer choice a new empty object is pushed in the question.answers array and this objects first key answer hold the value of question field and second key ` like

question.answers=[
                   {'answer':'',correct:''},
                   {'answer':'',correct:''},
                   {'answer':'',correct:''},
                   {'answer':'',correct:''},

]

Suggest me how can i do this . There is only one error that using $index i am unable to assign value to the array object at the same index in question.answers array. Or if there is any other better way suggest me. Help will be appreciated.

share|improve this question

1 Answer 1

up vote 1 down vote accepted

You are making just a small mistake. Correct your syntaxes and it will work fine replace your ng-repeat div with this code

<div ng-repeat="choice in choices">
<label class="checkbox-inline"> Choice</label>
<textarea  class="form-control" ng-model="question.answers[$index].answer">
</textarea>
<label class="checkbox-inline">
<input type="radio" name="correct" ng-model="question.answers[$index].correct_answer" value="1" />
    Correct
</label>
</div>

And assign values to the radio buttons or these will not show in your object.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.