Question

我有以下角度形式：

<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>

我想添加行为，以便当用户选择“清除”时，清除所有表单数据。我目前已经写过这个方法：

resetForm: (form) ->
  form.submitted = false
  form.$setPristine()
  angular.copy({}, client)

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

我意识到我可以遍历表单对象的每个属性，这样我就可以访问ngModelController实例：

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

但我可以在这里实际分配模型值还是更好的方法？

Answer 1

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

这是一个非常相似的小提琴链接：http://jsfiddle.net/V44fQ/

$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>

Answer 2

我通过编写两个指令解决了这个问题，一个附加到表单，另一个指向我想要的每个单独的输入＆＃39; resettable＆＃39;。然后附加到表单的指令将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)

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

Answer 3

无需复杂化。只需清理控制器中的范围变量即可。

普通JS：

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

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

以下是一个简单示例：http://jsfiddle.net/DLL3W/

以角度形式清除数据

3 个答案: