Binding checkbox values to respective arrays in angularjs

Question

I have a form created at run time using angularjs. This form has 6 questions and where question 1 answers are radio buttons while rest of questions have checkbox answers.

form is created as

<form ng-controller="PersonalityCtrl" ng-submit="submitInterests()">

    <div ng-repeat="question in interestQuestions.slice(0,1)" style="display: block;">
        <br> <span style="float: left">{{question.question}}</span> <br />
        <span ng-repeat="(key, value) in question.choices"> 
            <input  name="{{question.number}}"
            ng-click="addChoice(question.number, key,question.questionType)"
            type="radio" value="{{key}}" required />
            {{value}}
        </span> <br />
    </div>

    <div ng-repeat="question in interestQuestions.slice(1,6)" style="display: block;">
        <br> <span style="float: left">{{question.question}}</span> <br />
        <span ng-repeat="(key, value) in question.choices"> 
            <input  name="{{question.number}}"
            ng-click="addChoice(question.number, key,question.questionType)"
            type="checkbox" value="{{key}}" />
            {{value}}
        </span> <br />
    </div>
    <input type="submit" value="submit"></input>
    </ng-form>

My generated form looks like

Question : 1
0 0 0 0 0 (0 represents radio button)

Question : 2 
o o o o o (o represents check box)

Question : 3
o o o o o (o represents check box)

Question : 4
o o o o o (o represents check box)

and when i submit the form my post data should be of the form

[{1:[list of answers]},{2:[list of answers]},{...},{...},{...},{...}]

where 1,2 represents question number, while list of answers are value of checkboxes.

My question is how can i save answer for each question in separate array using angularjs.

Currently i am doing it as (but it does not seems angular way).

var q1 = {
        questionNumber : 1,
        answer : new Array()
    };
    var q2 = {
        questionNumber : 2,
        answer : new Array()
    };
    var q3 = {
        questionNumber : 3,
        answer : new Array()
    };
    var q4 = {
        questionNumber : 4,
        answer : new Array()
    };
    var q5 = {
        questionNumber : 5,
        answer : new Array()
    };
    var q6 = {
        questionNumber : 6,
        answer : new Array()
    };

    var userInterestAnswers = [ q1, q2, q3, q4, q5, q6 ];
    var choiceList = new Array();

    $scope.addChoice = function(question, choice, questionType) {

        switch (question) {
        case 1:
            q1.answer.push(choice);
            break;
        case 2:
            q2.answer.push(choice);
            break;
        case 3:
            q3.answer.push(choice);
            break;

        case 4:
            q4.answer.push(choice);
            break;

        case 5:
            q5.answer.push(choice);
            break;

        case 6:
            q6.answer.push(choice);
            break;

        default:

        }

zs2020 · Accepted Answer · 2013-08-16 14:56:57Z

1

How about rewrite the addChoice function like this

$scope.addChoice = function (question, choice, questionType) {
    userInterestAnswers[question].answer.push(choice);
}

And if you can add a type field in the foreach question, you can use ng-switch to display either checkboxes or radio buttons so you can merge the 2 repeaters. Try to rewrite to this pattern

<div ng-repeat ... >
    <div ng-switch on "question.type">
        <input ng-switch-when="multichoice" type="checkbox" ... >
        <input ng-switch-when="singlechoice" type="radio" ... >
    </div>
</div>

edited Aug 16, 2013 at 14:56

answered Aug 16, 2013 at 14:44

zs2020

54.6k30 gold badges157 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Binding checkbox values to respective arrays in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related