Javascript 以角度形式清除数据

我有以下的角度形式：

<form name="client_form" id="client_form" role="form">
  <div class="bb-entry">
    <label for="firstname">First Name:*</label>
    <input type="text" name="firstname" ng-model="client.first_name" required class="form-control"/>
  </div>
  <div class="bb-entry">
    <label for="lasttname">Last Name:*</label>
    <input type="text" name="lastname" ng-model="client.last_name" required class="form-control"/>
  </div>
  <div class="bb-entry">
    <label for="email">E-mail:*</label>
    <input type="email" name="email" ng-model="client.email" required class="form-control"/>
  </div>
</form>
<button type="button" ng-click="resetForm(client_form)">Clear</button>

但是，这会清除整个客户端对象，实际上，我只想清除表单中引用的属性

我意识到我可以迭代form对象的每个属性，这使我能够访问ngModelController实例：

resetForm: (form,) ->
    form.submitted = false
    form.$setPristine()
    angular.forEach form, (value, key) ->
      if value.hasOwnProperty("$modelValue")
        # set model value here?

---

但是我可以在这里实际分配模型值吗？或者采用不同的方法会更好吗？

无需使事情复杂化。只需清除控制器中的范围变量

普通JS：

$scope.resetForm = function() {
    $scope.client.first_name = '';
    $scope.client.last_name = '';
    $scope.client.email = '';
}

如果愿意，可以解析$scope.client对象，并将属性设置为false（例如，如果表单是动态的）

---

下面是一个简单的示例：

我认为您需要先复制客户端，然后清除新的客户端对象

这里有一个类似的小提琴链接：

---

我通过编写两条指令解决了这个问题，一条附在表单上，另一条附在我希望“可重置”的每个输入上。然后，附加到表单的指令将resetForm方法添加到父控制器：

# Adds field clearing behaviour to forms.  
app.directive 'bbFormResettable', ($parse) ->
  restrict: 'A'
  controller: ($scope, $element, $attrs) ->
    $scope.inputs = []

    $scope.resetForm = () ->
      for input in $scope.inputs
        input.getter.assign($scope, null)
        input.controller.$setPristine()

    registerInput: (input, ctrl) ->
      getter = $parse input
      $scope.inputs.push({getter: getter, controller: ctrl})


# Registers inputs with the bbFormResettable controller allowing them to be cleared
app.directive 'bbResettable', () ->
  restrict: 'A',
  require: ['ngModel', '^bbFormResettable'],
  link: (scope, element, attrs, ctrls) ->
    ngModelCtrl        = ctrls[0]
    formResettableCtrl = ctrls[1]
    formResettableCtrl.registerInput(attrs.ngModel, ngModelCtrl)

---

可能是杀伤力过大，但此解决方案确保只清除指定的属性，而不清除整个客户端对象。

为什么不这样做将清除整个表单，然后如果需要在单击时调用某个内容，只需使用onclickHey@pattyd，即可明显清除表单字段，但是似乎没有清除基础模型中的数据？这就是为什么需要设置onclick。设置onclick函数以清除该数据，这是一个相当丑陋的解决方案。维护或书写，在这个问题上，当你有一个大的表单时，这是一个混乱的局面。@dirkk，这就是为什么我说有很多方法来处理这个问题。。。我只是把启动板给了OP，这样他就可以得到一个工作代码，继续前进。就我个人而言，我只是将$scope.client设置为空对象，再也不用担心该表单了。在这种情况下，我不想将“$scope.client”设置为空对象，因为我想保留一些属性。理想情况下，我只想清除表单中使用的属性。@LukeFerguson是的，我不知道整个应用程序是什么样子，所以不想深入研究它。但无论如何，从这一点上来说，您有很多选择-您可以手动清除必要的属性；将它们存储在数组中，并对照它们检查客户机对象；仅为表单创建一个新的范围变量，并从中更新客户端；等

$scope.editClient = function(client) {
    $scope.edit_client = angular.copy(client);
}

$scope.cancelEdit = function() {
    $scope.edit_client = {};
};

<form name="client_form" id="client_form" role="form">
  <div class="bb-entry">
    <label for="firstname">First Name:*</label>
    <input type="text" name="firstname" ng-model="edit_client.first_name" required class="form-control">
  </div>
  ...
  <button type="button" ng-click="cancelEdit()">Clear</button>
</form>

# Adds field clearing behaviour to forms.  
app.directive 'bbFormResettable', ($parse) ->
  restrict: 'A'
  controller: ($scope, $element, $attrs) ->
    $scope.inputs = []

    $scope.resetForm = () ->
      for input in $scope.inputs
        input.getter.assign($scope, null)
        input.controller.$setPristine()

    registerInput: (input, ctrl) ->
      getter = $parse input
      $scope.inputs.push({getter: getter, controller: ctrl})


# Registers inputs with the bbFormResettable controller allowing them to be cleared
app.directive 'bbResettable', () ->
  restrict: 'A',
  require: ['ngModel', '^bbFormResettable'],
  link: (scope, element, attrs, ctrls) ->
    ngModelCtrl        = ctrls[0]
    formResettableCtrl = ctrls[1]
    formResettableCtrl.registerInput(attrs.ngModel, ngModelCtrl)