2-way binding for radio buttons in angularjs

Question

i am kind of stuck here, i am new to angular js.

I have a form having number of questions. These questions are loading with angularjs.

html for form is

<form ng-controller="controller" ng-submit="submitFirstQuiz()">
<div ng-repeat = "question in quiz.questions">
{{question}}
<label data-ng-repeat="choice in quiz.choices" style="float:left;">
    <input name="{{question}}" type="radio" value="{{choice}}"/>
</label>
<br/>
</div>
<input type="submit" value="submit"></input>
</ng-form>

and my js is

'use strict';

var QuizModule = angular.module('quiz');

QuizModule.controller('PersonalityQuizCtrl', function($scope){

    $scope.quiz = {
            questions: ["q1","q2","q3"],
            choices: ["5","4","3","2","1"]
        };

    $scope.submitFirstQuiz = function(){
        console.debug("how to print selected choices");
    };

});

The above code is generating my form as i want. Now how can i get the selected values of the radio buttons, in other word how can i submit the form with selected value. I don't how to bind the result data. Kindly help me, i shall be thankful. Regards,

AlwaysALearner · Accepted Answer · 2013-08-12 12:30:26Z

1

HTML:

<input name="{{question}}" ng-click="radioSelected(choice, question)" 
type="radio" value="{{choice}}"/>

JS:

'use strict';

var QuizModule = angular.module('quiz');

QuizModule.controller('PersonalityQuizCtrl', function($scope){

    $scope.quiz = {
            questions: ["q1","q2","q3"],
            choices: ["5","4","3","2","1"]
        };

    $scope.selectedChoices = {};

    $scope.radioSelected = function(choice, question){        
        $scope.selectedChoices[question] = choice;
    }
    $scope.submitFirstQuiz = function(){
        console.log($scope.selectedChoices);
    };

});

edited Aug 12, 2013 at 12:30

answered Aug 12, 2013 at 12:05

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

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

1 Comment

Shahzeb Khan Over a year ago

now all respective buttons for all questions are getting selected, i have added the screen shot. for example. if i select first choice for question 1, choice one is automatically selected for all questions.

Collectives™ on Stack Overflow

2-way binding for radio buttons in angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related