在 AngularJS 中发布更新模型绑定单选按钮

Question

我需要帮助才能正确填写我的表单。这是一个简单的页面，我有一些问题和一些答案。可以将其中一个答案设置为更正，但并非总是如此。但是一个问题只能有一个正确答案，所以我使用单选按钮。我的初始模型绑定工作正常，只选择了正确的答案。但是当我选择另一个答案时，我的模型没有在控制器中更新？

这是我在 jsfiddle 中的示例： http://jsfiddle.net/dnrn/tujaxx03/12/

这是我的表格：

<form name="questionForm" ng-controller="QuestionEditController as controller">
{{ hello }}
    <b>Spørgsmål:</b> <input ng-model="question.Question" name="questionText" type="text" size="100"/> <br/>
    <b>Spørgsmål Engelsk:</b> <input ng-model="question.EnglishQuestion" name="questionText" type="text" size="100" />

    <br />

    <b>Svarmuligheder:</b>
    <div ng-repeat="answer in question.Answers">
        <b>Dansk</b> <input ng-model="answer.Answer" size="35" /> 
        <b>Englesk</b> <input ng-model="answer.EnglishAnswer" size="35" />
        <input ng-model="answer.IsCorrect" name="Correct" type="radio" ng-value="answer.IsCorrect" ng-click="setCorrectAnswer(answer.Id)" />
        <a href="">Slet</a>
    </div>       

    <input type="submit" value="Gem"/>

还有我的控制器：

var app = angular.module('myApp',[]);
app.controller('QuestionEditController', ['$scope', function ($scope){
    $scope.question = {
            "Id": 58, "Question": "Hvem opdagede Jupiters 4 måner Europa, Io, Ganyedes og Callisto?", "EnglishQuestion": "Who discovered Jupiter’s 4 moons: Europa, Io, Ganymede and Callisto?", "GermanQuestion": "", "Answers":
                [{ "Id": 130, "Answer": "Leonardo da Vinci i 1507", "EnglishAnswer": "Leonardo da Vinci in 1507", "GermanAnswer": "", "IsCorrect": false },
                    { "Id": 131, "Answer": "Tycho Brahe i 1599", "EnglishAnswer": "Tycho Brahe in 1599", "GermanAnswer": "", "IsCorrect": false },
                    { "Id": 132, "Answer": "Galileo Galilei i 1610", "EnglishAnswer": "Galileo Galilei in 1610", "GermanAnswer": "", "IsCorrect": true }],
            "AnswerCount": 0
        };

    $scope.save = function() {
        $scope.saved = $scope.question.Answers.filter(function (answer) {
            if (answer.IsCorrect) {
                return answer;
            }
        });
        };
}]);

Answer 1

我猜你的问题是过滤器和你接近正确答案识别的方式，以及单选按钮绑定的误用。

请查看 input[radio] 文档：https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

建议将所选值存储在特定的 $scope 变量中，我分叉了你的 fiddle 并想出了这个：

http://jsfiddle.net/bjhukmc4/

请检查这是否是所需的行为，以及我是否理解得很好。

基本上我向范围添加了一个变量： $scope.selectedAnswer = {};

然后，设置单选按钮以将所选值存储在该变量上：

<input ng-model="$parent.selectedAnswer" name="Correct" type="radio" ng-value="answer" ng-click="setCorrectAnswer(answer.Id)" />

$parent 是必需的，因为 ng-repeat 创建了它自己的范围。

希望对您有所帮助。

在 AngularJS 中发布更新模型绑定单选按钮

Issue updating modelbinding radio button in AngularJS

model-binding

radio-button

angularjs