Очистить данные в виде угольника

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

Не нужно усложнять ситуацию. Просто очистите переменные области видимости в контроллере.

Plain JS:

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

Если вы хотите, вы можете разобрать объект $ scope.client и установить свойства ложным (если форма является динамическим, например).

---

Вот простой пример: http://jsfiddle.net/DLL3W/

Answer 2

Я думаю, вам нужно сначала скопировать клиента, затем снимите новый объект клиента.

Вот ссылка скрипки, что делает что-то очень похожее: 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 3

Я решил проблему, написав две директивы, одна из которых прикреплен к форме, а другая для каждого входа, что я хочу быть сброшенным. Директива к листку затем добавляет метод 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) 

Возможно массовое убийство, но это решение обеспечивает только атрибуты, заданные очищаются, а не весь объект клиента.