CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangular-ui
jonny
jonny

Reputation: 797

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

I have following JSON with answers:
And i want to submit this to database only one of the answer can have "IS_CORRECT" flag with value "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" } 
    ]

In my html i use ng-repeat to loop over my answers and i create a radio button for each.

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

My problem is that when i check Answer_id 5 as correct it updates "IS_CORRECT" field from my model to "Y" but it does not update AnsWer 4 and 3 "IS_CORRECT to 'N'.

Can you please give me some suggestions

Upvotes: 0

Views: 108

Answers (1)

Kostya Shkryob
Kostya Shkryob

Reputation: 2369

You are using radio buttons as checkboxes. Better approach is to save current value:

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

Upvotes: 2

Related Questions