提交後的清空表格

Question

我正在提交表單 - 並將內容添加到數組中，但是無論何時將該項目添加到數組中，它仍然綁定到表單。

我想添加項目，清除表單。像jquery的reset（）;

這裏是我的模板：

<div class="col-xs-12" ng-controller="ResourceController"> 
    <div class="col-md-4"> 
     <h3>Name</h3> 
    </div> 
    <div class="col-md-8"> 
     <h3>Description</h3> 
    </div> 
    <form class="form-inline" role="form" ng-repeat="item in resources"> 
     <div class="form-group col-md-4"> 
      <input type="text" class="form-control" value="{{ item.name }}"/> 
     </div> 
     <div class="form-group col-md-7"> 
      <input type="text" class="form-control" value="{{ item.description }}"/> 
     </div> 
    </form> 
    <form class="form-inline" role="form" name="addResourceForm" ng-submit="addResource()"> 
     <div class="form-group col-md-4"> 
      <input type="text" class="form-control" name="name" ng-model="name" placeholder="Name"/> 
     </div> 
     <div class="form-group col-md-7"> 
      <input type="text" class="form-control" name="description" ng-model="description" placeholder="Description"/> 
     </div> 
     <div class="form-group col-md-1"> 
      <button type="submit" class="btn btn-default">Add</button> 
     </div> 
    </form> 
</div> 

而且我的控制器：

(function(){ 
    var app = angular.module('event-resources', []); 
    app.controller('ResourceController', function($scope){ 
     $scope.addResource = function(){ 
      $scope.resources.push(this); 
     } 

     var defaultForm = { 
      name : '', 
      description: '' 
     }; 

     $scope.resources = [ 
     { 
      name: 'Beer', 
      description: 'Kokanee' 
     }, 
     { 
      name: 'Pucks', 
      description: 'Black Round Things' 
     } 
     ] 
    }); 
})(); 

Answer 1

使用angular.copy()的項目數據複製到資源數組，然後你可以安全地清除的項目數據。該angular.copy()使對象的深層副本，這是你想要的。

---

或者，這裏有一個簡單的方法，不使用任何額外的方法調用：

$scope.addResource = function() { 
    $scope.resources.push({ 
    name: $scope.name,  // recreate object manually (cheap for simple objects) 
    description: $scope.description 
    }); 
    $scope.name = "";   // clear the values. 
    $scope.description = ""; 
}; 

Answer 2

$scope.addResource = function(){ 
      $scope.resources.push(angular.copy(this)); 
      $scope.name=""; 
      $scope.description="" 
     } 

推拷貝到資源數組，並更改名稱和描述回「 「