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