CODEWITHSUNDEEP
javascriptangularjsforms
jcobo1
jcobo1

Reputation: 1170

AngularJS: get value from form

I'm using 3 nested ng-repeat for read a json and show several questions and his answers. Until here it's working but now I'm trying to store the seleted answers and send it to the API. I don't know why the selected answers are not being stored.

This is my view:

<form>
    <div class="panel panel-default" ng-repeat="section in questionsTest">
        <div class="panel-heading">
            <h1>{{ section.name }}</h1>
            <h3 class="panel-title">{{ section.name }}. {{
                section.description }}</h3>
        </div>
        <div class="panel-body" ng-repeat="question in section.questions">
            {{ question.statement }}
            <div ng-repeat="answer in question.answers">
                <!--  <label class="radio-inline"> <input type="{{ answer.type }}" ng-model="question.value"
                    name="{{ answer.id }}" id="{{ answer.id }}" value="{{ answer.id }}">
                    {{ answer.valor }}
                </label>-->
                <label class="radio-inline"> <input type="{{ answer.type }}" ng-model="question.valor"
                    name="{{ question.id }}" id="{{ answer.id }}" value="{{ answer.id }}">
                    {{ answer.valor }}
                </label>
            </div>
        </div>
    </div>
</form>

And this is the controller:

$scope.question = {};
$scope.testing = function(){
    console.log($scope.question);
};

$scope.testing is a testing function to see on the console the value of $scope.question

Upvotes: 0

Views: 50

Answers (1)

Max Koretskyi
Max Koretskyi

Reputation: 105499

You html setup is correct, you're just not reading it the selected values correctly. To get a selected answer for the first question, use the following:

$scope.json.section[0].questions[0].value

It's because when you're putting question.valor into ng-model - it's actually a n-th question inside n-th section. Those n indexes are defined by the number of items inside your original data structure $scope.json.

To get all values, you can iterate over your original object:

$scope.testing = function () {
    var answers = {sections: []};

    for (var i = 0; i < $scope.json.section.length; i++) {
        if (!answers.sections[i]) {
            answers.sections[i] = {answers: []};
        }

        for (var j = 0; j < $scope.json.section[i].questions.length; j++) {
            if (!answers.sections[i].answers) {
                answers.sections[i].answers = [];
            }

            answers.sections[i].answers[j] = $scope.json.section[i].questions[j].value
        }
    }
}

Upvotes: 1

Related Questions