angularjs中单选按钮的双向绑定

时间:2013-08-12 12:00:13

标签: angularjs angularjs-scope angularjs-ng-repeat

我有点被困在这里,我是棱角分明的新人。

我的表格有很多问题。这些问题正在加载angularjs。

表单的html是

<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>

我的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.submitFirstQuiz = function(){
        console.debug("how to print selected choices");
    };

});

上面的代码正在生成我想要的表单。现在我如何获得单选按钮的选定值,换句话说,我如何提交具有选定值的表单。我不知道如何绑定结果数据。请帮助我,我将感恩。 的问候,

1 个答案:

答案 0 :(得分: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);
    };

});