提交后如何清除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

嘿，有趣的问题，我已经弄乱了它，我想出了类似的东西（我已经抽象出来并简化了它，你可以根据自己的喜好来实现它）。可能不是超级优雅，但它确实起作用： 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选择它们并删除字段。

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

您必须手动重置数据。有关详细信息，请参阅this网站。 你还必须打电话

$form.$setPristine()

清除所有css类。