Reset of radio buttons not working in AngularJS

Question

I am working on a quiz. However, the reset button does not work in my Quiz. Can someone help me out?

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
<p>Q1: What is capital of England? </p>
<ul>
	<li><input type="radio" name="q1" value="1" ng-model="quiz.one"> London</li>
	<li><input type="radio" name="q1" value="2" ng-model="quiz.one"> Brisbane</li>
</ul>
<p>Q2: What is capital of Austrailia? </p>
<ul>
	<li><input type="radio" name="q2" value="1" ng-model="quiz.two"> Canberra</li>
	<li><input type="radio" name="q2" value="2" ng-model="quiz.two"> Sydney</li>
</ul>
<button ng-click="show()">Click Me</button>
<button ng-click="reset()">Reset</button>

<script>
//module declaration
var app = angular.module('myApp',[]);

//controller
app.controller('myCtrl',function($scope){
$scope.quiz = {one:"", two:""};
$scope.show = function(){
	alert("Done");
}
$scope.reset = function(){
	angular.forEach($scope.quiz,function(val, key){
		val = "";
		val.checked = false;
	});
}
});

</script> 
</body> 
</html>

Nitheesh · Accepted Answer · 2017-04-08 09:51:42Z

Please change the reset function like this. That will work.

$scope.reset = function () {
    angular.forEach($scope.quiz, function (val, key) {
        $scope.quiz[key] = "";
    });
}

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <p>Q1: What is capital of England? </p>
    <ul>
        <li>
            <input type="radio" name="q1" ng-value="1" ng-model="quiz.one"> London</li>
        <li>
            <input type="radio" name="q1" ng-value="2" ng-model="quiz.one"> Brisbane</li>
    </ul>
    <p>Q2: What is capital of Austrailia? </p>
    <ul>
        <li>
            <input type="radio" name="q2" ng-value="1" ng-model="quiz.two"> Canberra</li>
        <li>
            <input type="radio" name="q2" ng-value="2" ng-model="quiz.two"> Sydney</li>
    </ul>
    <button ng-click="show()">Click Me</button>
    <button ng-click="reset()">Reset</button>

    <script>
        //module declaration
        var app = angular.module('myApp', []);

        //controller
        app.controller('myCtrl', function ($scope) {
            $scope.quiz = {
                one: "",
                two: ""
            };
            $scope.show = function () {
                alert("Done");
            }
            $scope.reset = function () {
                angular.forEach($scope.quiz, function (val, key) {
                    $scope.quiz[key] = "";
                });
            }
        });
    </script>
</body>

</html>

kaushlendras · Accepted Answer · 2017-04-08 09:45:10Z

0

You are looping on $scope.quiz1 instead of $scope.quiz

answered Apr 8, 2017 at 9:45

kaushlendras

2201 silver badge7 bronze badges

Comments

RITESH ARORA · Accepted Answer · 2017-04-08 09:53:16Z

Try this What is got you are directly trying to delete val but not assigning back to json which should be done in each method



    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl"> 
    <p>Q1: What is capital of England? </p>
    <ul>
    	<li><input type="radio" name="q1" value="1" ng-model="quiz.one"> London</li>
    	<li><input type="radio" name="q1" value="2" ng-model="quiz.one"> Brisbane</li>
    </ul>
    <p>Q2: What is capital of Austrailia? </p>
    <ul>
    	<li><input type="radio" name="q2" value="1" ng-model="quiz.two"> Canberra</li>
    	<li><input type="radio" name="q2" value="2" ng-model="quiz.two"> Sydney</li>
    </ul>
    <button ng-click="show()">Click Me</button>
    <button ng-click="reset()">Reset</button>

    <script>
    //module declaration
    var app = angular.module('myApp',[]);

    //controller
    app.controller('myCtrl',function($scope){
    $scope.quiz = {one:"", two:""};
    $scope.show = function(){
    	alert("Done");
    }
    $scope.reset = function(){
    	angular.forEach($scope.quiz,function(val, key){
    		$scope.quiz[key] = "";

    	});
    }
    });

    </script> 
    </body> 
    </html>

shabudeen shaikh · Accepted Answer · 2017-04-08 10:23:01Z

0

Try using ng-checked you can accomplish this

https://docs.angularjs.org/api/ng/directive/ngChecked

answered Apr 8, 2017 at 10:23

shabudeen shaikh

815 bronze badges

Collectives™ on Stack Overflow

Reset of radio buttons not working in AngularJS

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related