javascript - 重置单选按钮在 AngularJS 中不起作用

标签 javascript html angularjs

我正在做一个测验。但是,重置按钮在我的测验中不起作用。有人可以帮我吗?

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

最佳答案

请像这样更改重置功能。这会起作用的。

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

关于javascript - 重置单选按钮在 AngularJS 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43292467/

相关文章:

html - anchor 元素悬停仅适用于 bootstrap 4 轮播的一张幻灯片,但不适用于其他幻灯片

javascript - 使用 Angular 在顶部添加行 - Xeditable

javascript - 在 "n"多个 DOM 节点上调用 angular.bootstrap 会实例化 "n "AngularJS 应用程序吗?

javascript - Angular $route.reload() 没有重新加载 Controller

javascript - 在Javascript中,在IE8中,事件中附加的对象方法保持 'window object',而不是对象本身在 'this'

javascript - wp颜色选择器 : How update colors on input value update?

HTML/JSP 显示表格的自定义重复背景图像

javascript - Windows Phone 7 不显示脚本或图像

javascript - 使用 requireJS 加载最新 Kendo 版本时出现问题

javascript - 在循环中注册启动脚本