Question

我正在进行一项测验。但是，重置按钮在我的测验中不起作用。有人可以帮我吗？

＆＃13;

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

＆＃13;

Answer 1

请改变这样的重置功能。这将有效。

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

Answer 2

您正在循环使用$ scope.quiz1而不是$ scope.quiz

Answer 3

试试这个你得到的是直接尝试删除val而不是分配回json，这应该在每个方法中完成

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

Answer 4

尝试使用ng-checked，您可以完成此操作

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

重置无法在AngularJS中工作的单选按钮

4 个答案: