Javascript Angularjs表单重置

Javascript Angularjs表单重置,javascript,forms,angularjs,Javascript,Forms,Angularjs,我在angular中有一个重置函数来清除表单中的所有字段。如果我这样做: <a href="#" ng-click="resetForm()">reset</a> $scope.resetForm = function() { $scope.someForm = {}; } $scope.resetForm=函数(){ $scope.someForm={}; } 一切正常。但是我想在网站上的多个表单中使用这个函数。如果我像这样传递表单对象: <a hre

我在angular中有一个重置函数来清除表单中的所有字段。如果我这样做:

<a href="#" ng-click="resetForm()">reset</a>

$scope.resetForm = function() {
  $scope.someForm = {};
}

$scope.resetForm=函数(){
$scope.someForm={};
}
一切正常。但是我想在网站上的多个表单中使用这个函数。如果我像这样传递表单对象:

<a href="#" ng-click="resetForm(someForm)">reset</a>

$scope.resetForm = function(form) {
  $scope.form = {};
}

$scope.resetForm=函数(表单){
$scope.form={};
}
那就不行了。有人能解释一下为什么会发生这种情况吗?

您有两个问题:

  • 您没有访问传入的变量,仍然访问当前范围的
    someForm
  • 当您将参数传递给函数时,它是通过引用传递的。即使使用
    form={}
    ,它也不起作用,因为它只更改参数的引用,而不是传入的
    someForm的引用
尝试:

而不是:

$scope.resetForm = function(form) {
  $scope.form = {};
}
在您的plunk中,我看到您没有将视图与模型分离。您应该这样做是为了分离关注点,并避免在清除所有字段(包括DOM表单对象的字段)时可能发生的问题


第一场

第二场
您还可以执行以下操作:

form.fieldA = undefined; 
它适用于单选按钮和复选框。

您可以尝试以下方法: 在表单按钮重置中部署您的函数,以这种方式

<input type ="button" ng-click="Object.field1 = null; ObjectN.fieldN = null;"  value="Reset" />


谢谢你的建议。不幸的是,它似乎也不起作用。另外,如果我在表单上执行console.log,它会显示它正在调用重置函数两次。我不知道它为什么会这样做。@sturoid:对于当前的代码,我不知道它为什么调用了两次
resetForm
,可能是其他地方的问题。谢谢你,这是有道理的。问题是,如果我将其用于多个表单,那么我必须考虑表单传递的所有字段。是否可以对每个字段进行循环并将其设置为null或类似值?@sturoid:是的,这也是一个解决方案。我只是指出了你为什么不能重新设置表单的问题。@sturoid:我知道你从来没有接受过答案。请这样做,以便人们知道哪个解决方案解决了问题中的问题。对于Kahn建议的工作解决方案示例:
<form name="form2" ng-controller="SecondController">
      <label for="first_field">First Field</label>
      <input ng-model="form2Model.first_field" />
      <br />
      <label for="second_field">Second Field</label>
      <input ng-model="form2Model.second_field" />
      <br />

      <a href="#" ng-click="secondReset(form2Model)">Reset the form</a>
    </form>
form.fieldA = undefined; 
<input type ="button" ng-click="Object.field1 = null; ObjectN.fieldN = null;"  value="Reset" />