提交后如何清除angularJS表格？

Question

我在模態窗口上有save方法，一旦用戶執行了save方法，我想清除表單字段，保存后我實現了$ 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

嘿，一個有趣的問題，我已經弄亂了，我想出了類似的東西（我已將問題抽象化並簡化了，這取決於您的意願）。 可能不是超級優雅，但確實可以做到： 小提琴

<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選擇它們並清除字段。

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

您必須手動重置數據。 有關更多信息，請參見此網站。 你也必須打電話

$form.$setPristine()

清除所有css類。