2017-04-08 20 views
1

我正在進行測驗。但是,重置按鈕在我的測驗中不起作用。有人可以幫我嗎?重置單選按鈕在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> 
 
\t <li><input type="radio" name="q1" value="1" ng-model="quiz.one"> London</li> 
 
\t <li><input type="radio" name="q1" value="2" ng-model="quiz.one"> Brisbane</li> 
 
</ul> 
 
<p>Q2: What is capital of Austrailia? </p> 
 
<ul> 
 
\t <li><input type="radio" name="q2" value="1" ng-model="quiz.two"> Canberra</li> 
 
\t <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(){ 
 
\t alert("Done"); 
 
} 
 
$scope.reset = function(){ 
 
\t angular.forEach($scope.quiz,function(val, key){ 
 
\t \t val = ""; 
 
\t \t val.checked = false; 
 
\t }); 
 
} 
 
}); 
 

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

回答

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>

+0

$ scope.quiz [key] =「」; ,請參閱下面的評論 –

0

試試這個 是什麼把你直接試圖刪除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> 
 
    \t <li><input type="radio" name="q1" value="1" ng-model="quiz.one"> London</li> 
 
    \t <li><input type="radio" name="q1" value="2" ng-model="quiz.one"> Brisbane</li> 
 
    </ul> 
 
    <p>Q2: What is capital of Austrailia? </p> 
 
    <ul> 
 
    \t <li><input type="radio" name="q2" value="1" ng-model="quiz.two"> Canberra</li> 
 
    \t <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(){ 
 
    \t alert("Done"); 
 
    } 
 
    $scope.reset = function(){ 
 
    \t angular.forEach($scope.quiz,function(val, key){ 
 
    \t \t $scope.quiz[key] = ""; 
 

 
    \t }); 
 
    } 
 
    }); 
 

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