如何重置angularjs中的輸入字段和複選框

我有一個單輸入和另外兩個複選框標記爲是和號碼我想保存輸入值，當我點擊是[這不是問題]。點擊是後，輸入和複選框應該重置。我怎樣才能做到這一點？將ng-model設置爲null不適用於我。如何重置angularjs中的輸入字段和複選框

var app = angular.module("app", ['ionic']); 
 

 
app.controller("MainCtrl", function ($scope,$timeout,$state) { 
 

 
\t \t $scope.selected='other'; 
 
    $scope.refresh = function(selected,answer){ 
 
    if(selected == 'yes'){ 
 
     $timeout(function(){ 
 
     $scope.$apply(function(){ 
 
      $scope.uncheck = false; 
 
     }) 
 
      
 
      },250); 
 
    } 
 
     
 
    } 
 
});

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="http://code.ionicframework.com/1.3.2/css/ionic.css" /> 
 
    <script src="http://code.ionicframework.com/1.3.2/js/ionic.bundle.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="bar bar-header bar-assertive"> 
 
     <h1 class="title">Example</h1> 
 
     </div> 
 
    <div ng-app="app" style="margin-top:64px;padding:20px;"> 
 
    
 
    <div ng-controller="MainCtrl" class="has-header"> 
 
     
 
     <label class="item item-input"> 
 
\t \t  <textarea msd-elastic ng-model="answer.three" placeholder="Your answer"></textarea> 
 
\t \t </label> 
 
     <div> 
 
     <ion-checkbox class="cs-checkbox" ng-model="selected" ng-true-value="'no'" ng-change="statethree(selected,answer)">No</ion-checkbox> 
 
     <ion-checkbox class="cs-checkbox" ng-disabled="!answer.three" ng-checked="uncheck" ng-model="selected" ng-true-value="'yes'" ng-change="refresh(selected,answer)">Yes</ion-checkbox> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-02-12 Suraj Khanal

下面是工作代碼複選框，但通常在這樣的情況下，最好能夠使用單選按鈕（但它chnage你的UI設計）

var app = angular.module("app", ['ionic']); 
 

 
app.controller("MainCtrl", function ($scope,$timeout,$state) { 
 

 
    $scope.selected='other'; 
 
    $scope.refresh = function(selected,answer){ 
 
    if($scope.selected){ 
 
     $timeout(function() { 
 
     $scope.answer.three = ''; 
 
     $scope.selected = ''; 
 
     }, 250) 
 
    }; 
 
     
 
    } 
 
});

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="http://code.ionicframework.com/1.3.2/css/ionic.css" /> 
 
    <script src="http://code.ionicframework.com/1.3.2/js/ionic.bundle.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="bar bar-header bar-assertive"> 
 
     <h1 class="title">Example</h1> 
 
     </div> 
 
    <div ng-app="app" style="margin-top:64px;padding:20px;"> 
 
    
 
    <div ng-controller="MainCtrl" class="has-header"> 
 
     
 
     <label class="item item-input"> 
 
\t \t <textarea msd-elastic ng-model="answer.three" placeholder="Your answer"></textarea> 
 
\t \t </label> 
 
     <div> 
 
     <ion-checkbox class="cs-checkbox" ng-true-value="false" ng-model="selected">No</ion-checkbox> 
 
     <ion-checkbox class="cs-checkbox" ng-disabled="!answer.three" ng-model="selected" ng-change="refresh(selected,answer)">Yes</ion-checkbox> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

另請注意，您不應該使用由於$timeout已經觸發了角度摘要循環，因此在$timeout內部回調了。

來源

2017-02-12 11:47:44

非常感謝您的解決方案。 –

如何重置angularjs中的輸入字段和複選框

回答

相關問題