提交後如何清除angularJS表單？

Question

我有保存模式窗口的方法一旦用戶執行保存方法我想清除表單字段，保存後，我已經實現$ setPristine但它沒有清除表單。如何使用angularJS實現該任務？

到目前爲止已經試過代碼.... main.html中

<div> 
    <form name="addRiskForm" novalidate ng-controller="TopRiskCtrl" class="border-box-sizing"> 
     <div class="row"> 
       <div class="form-group col-md-12 fieldHeight"> 
        <label for="topRiskName" class="required col-md-4">Top Risk Name:</label> 
        <div class="col-md-8"> 
         <input type="text" class="form-control" id="topRiskName" ng-model="topRiskDTO.topRiskName" 
          name="topRiskName" required> 
           <p class="text-danger" ng-show="addRiskForm.topRiskName.$touched && addRiskForm.topRiskName.$error.required">Top risk Name is required field</p> 
        </div> 
       </div> 
     </div> 
     <div class="row"> 
       <div class="form-group col-md-12"> 
        <label for="issuePltfLookUpCode" class="col-md-4">Corresponing Issue Platform:</label> 
        <div class="col-md-8"> 
         <select 
          kendo-drop-down-list 
          data-text-field="'text'" 
          data-value-field="'id'" name="issuePltfLookUpCode" 
          k-option-label="'Select'" 
          ng-model="topRiskDTO.issuePltfLookUpCode" 
          k-data-source="issuePltDataSource" 
          id="issuePltfLookUpCode">   
         </select> 
        </div> 
       </div> 
     </div> 
     <div class="row"> 
       <div class="form-group col-md-12 fieldHeight"> 
        <label for="issueNo" class="col-md-4">Issue/Risk Number:</label> 
        <div class="col-md-8"> 
         <input type="text" class="form-control" id="issueNo" ng-model="topRiskDTO.issueNo" 
          name="issueNo"> 
        </div> 
       </div> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary pull-right" ng-disabled="addRiskForm.$invalid" ng-click="submit()">Save</button> 
      <button class="btn btn-primary pull-right" ng-click="handleCancel">Cancel</button> 
     </div> 
    </form> 
</div> 

main.js

$scope.$on('addTopRisk', function (s,id){ 
     $scope.riskAssessmentDTO.riskAssessmentKey = id; 
     $scope.viewTopRiskWin.open().center(); 
     $scope.submit = function(){ 
      rcsaAssessmentFactory.saveTopRisk($scope.topRiskDTO,id).then(function(){ 
      $scope.viewTopRiskWin.close(); 
      $scope.$emit('refreshTopRiskGrid'); 
      $scope.addRiskForm.$setPristine(); 
      }); 
     }; 

     }); 

Answer 1

您必須手動重置數據。有關更多信息，請參見this網站。 您還必須致電

$form.$setPristine() 

清除所有css類。

Answer 2

請參閱本頁面：http://blog.hugeaim.com/2013/04/07/clearing-a-form-with-angularjs/

$ setPristine只會清除變量而不是形式。要清除表單其值設置爲空字符串

<script type="text/javascript"> 
     function CommentController($scope) { 
      var defaultForm = { 
       author : "", 
       email : "", 
       comment: "" 
      }; 
      $scope.postComments = function(comment){ 
       //make the record pristine 
       $scope.commentForm.$setPristine(); 
       $scope.comment = defaultForm; 
      }; 
     } 
    </script> 

Answer 3

清除topRiskDTO

看着你的榜樣，似乎結算topRiskDTO會給你這樣的結果。

例如：

$scope.submit = function(){ 
    // ... 
    // The submit logic 

    // When done, Clear topRiskDTO object 
    for (var key in $scope.topRiskDTO) 
    { 
     delete $scope.topRiskDTO[key]; 
    } 
}; 

Answer 4

嘿，我已經與它周圍的混亂，我想出了這樣的事情（我已經抽象的問題，並簡化了很有意思的問題，它是由你把它實現給你的喜好）。可能不是超級優雅，但它的工作：Fiddle

<div ng-app="app"> 
    <div ng-controller="main"> 
     <form id="form"> 
      <input type="text" /> 
      <input type="text" /> 
     </form> 
     <button ng-click="clear()">clear</button> 
    </div> 
</div> 

JS

angular.module("app", []) 
.controller("main", function ($scope) { 
    $scope.clear = function() { 
     var inputs = angular.element(document.querySelector('#form')).children(); 
     angular.forEach(inputs, function (value) { 
      value.value=""; 
     }); 

    }; 
}) 

希望它能幫助。

編輯

如果你給你所有的輸入，必須清除共享類，你可以用querySelector選擇它們並刪除領域。