单选按钮和其他元素之间的数据绑定无法正常工作

debugcn 发表于 Dev

强尼

我有以下带有答案的JSON：
而且我想将其提交给数据库，只有答案之一可以具有值为“ Y”的“ IS_CORRECT”标志：

"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”。

你能给我一些建议吗

科斯蒂亚·什克里布（Kostya Shkryob）

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

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