代码之家  ›  专栏  ›  技术社区  ›  DNRN

AngularJS中的更新模型绑定单选按钮问题

  •  0
  • DNRN  · 技术社区  · 10 年前

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

    下面是我在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;
                }
            });
            };
    }]);
    
    1 回复  |  直到 10 年前
        1
  •  0
  •   Fedaykin    10 年前

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

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

    建议将所选值存储在一个特定的$scope变量中

    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 创建自己的范围。

    希望这会有所帮助。