單擊保存按鈕後，如何清空表單域

-5

我想在單擊保存按鈕後清空表單域，但無法做到這一點。單擊保存按鈕後，如何清空表單域

這裏是我的完整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>

來源

2016-07-23 swathi anupuram

@Ven或者[他們確實]（http://s2.quickmeme.com/img/15/1599e06bd7b11b9d1e3d414c4cfb97bd3ad4ed044ac06d4ec5625cf4d0d224ec.jpg）：P – Borgleader

請參閱我編輯的問題@Ven –

正確的方法是使用模型目的。因此，不是使用'$ scope.firstName'，'$ scope.lastName'等，而是使用'$ scope.formModel.firstName'，'$ scope.formModel.lastName'等等。然後當你想清除一些東西您只需使用'$ scope.formModel = {};'並且所有內容都已清空並準備好用於新輸入。 – Lex

你可以調用一個函數[如clearFields（）]上點擊保存按鈕。然後在clearFields（）函數中，可以清除所有ng模態值。

來源

2016-07-23 16:34:41 Forid

但我在我的應用程序中有更多的表單域@ @ Forid –

您可以創建一個名爲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

來源

2016-07-23 17:14:19 CozyAzure

你可以使用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>

來源

2016-07-23 18:05:35 developer033

單擊保存按鈕後，如何清空表單域

回答

相關問題