[英]Clear data in angular form
我有以下角度形式:
<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?
但是我可以在这里实际分配模型值,还是可以使用其他方法更好?
我认为您需要先复制客户端,然后清除新的客户端对象。
这是一个功能非常相似的小提琴链接: 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>
我通过编写两个指令解决了这个问题,一个指令附加在表单上,另一个指令附加到我希望可以“重置”的每个单独输入中。 然后,附加到表单的指令将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)
可能矫kill过正,但是此解决方案确保仅清除指定的属性,而不清除整个客户端对象。
无需使事情复杂化。 只需清理控制器中的作用域变量即可。
普通JS:
$scope.resetForm = function() {
$scope.client.first_name = '';
$scope.client.last_name = '';
$scope.client.email = '';
}
如果愿意,可以解析$ scope.client对象,并将属性设置为false(例如,如果表单是动态的)。
这是一个简单的示例: http : //jsfiddle.net/DLL3W/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.