Question

我想在点击保存按钮后清空表单字段，但我无法执行此操作。

这是我的完整code：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.oData = {};
  $scope.fnSave = function(data) {

  }
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <form name="myForm">
    <div class="form-group col-sm-12 col-xs-12">
      <label class="control-label">Name</label>
      <input class="form-control col-xs-12" type='text' ng-model="oData.name" required>
    </div>
    <div class="form-group col-sm-12 col-xs-12">
      <label class="control-label">Practice</label>
      <input class="form-control col-xs-12" type='text' ng-model="oData.practice" required>
    </div>
    <div class="form-group col-sm-12 col-xs-12">
      <label class="control-label">designation</label>
      <input class="form-control col-xs-12" type='text' ng-model="oData.designation" required>
    </div>
    <button ng-click="fnSave(oData)">save</button>
  </form>
</body>

</html>

Answer 1

您可以在单击“保存”按钮上调用函数[例如clearFields（）]。然后在clearFields（）函数中，您可以清除所有ng-modal值。

Answer 2

您可以创建一个名为clearInput()的函数来清除绑定的$scope个变量。您不仅可以清除它们，甚至可以根据需要将它们设置为默认值。但是，这需要明确列出要清除的表单中的所有变量。

  $scope.clearInput = function(){
    $scope.firstName = "Default User"; // you can set it to empty string or default values that you want.
    $scope.lastName = ""; //an empty string means it is a clear field. 
    $scope.email = null; //alternatively you can set it to null
    $scope.address = "";
  }

在HTML中，只需声明一个按钮，使用ng-click：

点击后调用该功能

<button ng-click="clearInput()">Clear Input</button>

这是工作plnkr

Answer 3

您可以使用ngSubmit指令，如下所示：

<form name="myForm" ng-submit="fnSave(oData)">

然后清除object中的整个function：

$scope.oData = {};

最后将button更改为：

<button type="submit">Save</button>

代码段正在运作：

(function() {
  angular
    .module('plunker', [])
    .controller('MainCtrl', MainCtrl);

  function MainCtrl($scope) {
    $scope.name = 'World';
    $scope.oData = {};

    $scope.fnSave = function(data) {
      // $http.post or whatever, then clean your whole object:
      $scope.oData = {};
    }
  }
})();

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body ng-controller="MainCtrl">
  <p>Hello, <strong ng-bind="name"></strong>!</p>
  <form name="myForm" ng-submit="fnSave(oData)">
    <div class="form-group col-md-12">
      <label for="name" class="control-label">Name</label>
      <input type="text" id="name" class="form-control" ng-model="oData.name" required>
    </div>
    <div class="form-group col-md-12">
      <label for="practice" class="control-label">Practice</label>
      <input type="text" id="practice" class="form-control" ng-model="oData.practice" required>
    </div>
    <div class="form-group col-md-12">
      <label for="designation" class="control-label">Designation</label>
      <input type="text" id="designation" class="form-control" ng-model="oData.designation" required>
    </div>
    <div class="col-md-12">
      <button type="submit" class="btn btn-success">Save</button>
    </div>
  </form>
</body>

</html>

单击“保存”按钮后，如何清空表单域

3 个答案: