单选按钮和其他元素之间的数据绑定未按预期工作

Question

我有以下 JSON 的答案：
我想将此提交给数据库，只有一个答案可以有 "IS_CORRECT" 标志，值为“Y:

"Answers": [ 
       { "ANSWER_ID": 5, "DESCRIPTION": "Answer 3", "IS_CORRECT": "N" }, 
       { "ANSWER_ID": 4, "DESCRIPTION": "Answer 2", "IS_CORRECT": N }, 
       { "ANSWER_ID": 3, "DESCRIPTION": "Answer 1", "IS_CORRECT": "N" } 
    ]

在我的 html 中，我使用 ng-repeat 循环我的答案，并为每个答案创建一个单选按钮。

    <div  class="control-group" ng-repeat="answer in Answers>
           <input type="radio" ng-model="answer.IS_CORRECT" value="Y" name="answer"/>  
    </div>

我的问题是，当我检查 Answer_id 5 是否正确时，它将 "IS_CORRECT" 字段从我的模型更新为 "Y"，但它不会更新 AnsWer 4 和 3“IS_CORRECT 到 'N'.

你能给我一些建议吗

Answer 1

您正在使用单选按钮作为复选框。更好的方法是保存当前值：

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
    </head>
    <body ng-app="testApp">
        <div ng-controller="controller">
            <div class="control-group" ng-repeat="answer in answers">
                <label>
                    {{answer.DESCRIPTION}}
                    <input type="radio" ng-model="$parent.correctAnswer" ng-value="answer" name="correct_answer">
                </label>
            </div>
            Correct Answer: {{correctAnswer.DESCRIPTION}}
        </div>
    </body>
    <script>
    var app = angular.module('testApp', []);
    app.controller('controller', function($scope) {
        $scope.answers = [ 
           { "ANSWER_ID": 5, "DESCRIPTION": "Answer 3"}, 
           { "ANSWER_ID": 4, "DESCRIPTION": "Answer 2"}, 
           { "ANSWER_ID": 3, "DESCRIPTION": "Answer 1"} 
        ];
        $scope.correctAnswer = $scope.answers[1];
    });
    </script>
</html>

单选按钮和其他元素之间的数据绑定未按预期工作

Data binding between radio button and other elements not working as expected

angularjs

angular-ui

angularjs-ng-repeat