如何以angularjs的形式清除或重置数据？ [英] How do I clear or reset data in a form in angularjs?
本文介绍了如何以angularjs的形式清除或重置数据？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
一直在使用angular和$ setPristine函数来查找如何清除表单数据，但仍然没有结果总是给我一个错误，说$ setPristine不是一个函数。任何人都可以帮助我解决问题吗？
这是我的angular.controller
var CustDetails = {
cname：$ scope.CusDetails.cname，
comname：$ scope.CusDetails.comname，
电话：$ scope.CusDetails.tel，
电子邮件：$ scope.CusDetails.email
};
CustService.Customer（CustDetails，function（res）{
console.log（res）;
$ .extend（$。gritter.options，{
位置：'bottom-right'，
}）;
if（res.data =='success'）{
$ .gritter.add（{
title：'成功！'，
text：'成功添加新客户'+'< h4>< span class =label label-primary>'+ CustDetails。 cname +'< / span>< / h4>'，
时间：'5000'，
close_icon：'l-arrows-remove s16'，
icon：'glyphicon glyphicon-
class_name：'success-notice'
}）;
// CustDetails = {};
customerForm。$ setPristine （true）;
}
else {
$ .gritter.add（{
title：'Failed！'，
text：'无法添加新客户'，
时间： '5000'，
close_icon：'l-arrows-remove s16'，
icon：'glyphicon glyphicon-remove-circle'，
class_name：'error-notice'
} ）;
}
}）;
}
这里是Html代码
< div ng-controller =AddCustomerController>
< div class =page-content-wrapper>
< div class =page-content-inner>
< div id =page-headerclass =clearfix>
< div class =page-header>
< h2>添加顾客< / h2>
< span class =txt>创建并添加新客户。< / span>
< / div>
< / div>
<！ - Start .row - >
< div class =row>
< div class =col-md-1>
< / div>
< div class =col-lg-9 col-sm-9 col-xs-12>
<！ - col-lg-9从这里开始 - >
< div class =panel panel-default toggle panelMove panelClose panelRefresh>
< div class =panel-heading>
< h4 class =panel-title>客户详情< / h4>
< / div>
< div class =panel-body pt0 pb0>
< div class =form-group>
< label class =col-lg-2 col-md-3 control-label>客户名称< / label>
< div class =col-lg-10 col-md-9>
< input type =textrequired id =cnameng-model =CusDetails.cnameclass =form-controlname =cname/>
< / div>
< / div>
<！ - .form-group - >的结束
< div class =form-group>
< label class =col-lg-2 col-md-3 control-label>公司名称< / label>
< div class =col-lg-10 col-md-9>
< input type =textrequired id =comnameng-model =CusDetails.comnameclass =form-controlname =comname/>
< / div>
< / div>
<！ - .form-group - >的结束
< div class =form-group>
< label class =col-lg-2 col-md-3 control-labelfor =>电话号码< / label>
< div class =col-lg-10 col-md-9>
< div class =input-group input-icon>
< span class =input-group-addon>< i class =fa fa-phone s16>< / i>< / span>
< input ng-model =CusDetails.telclass =form-controlid =cteltype =textplaceholder =（999）999-9999>
< / div>
< / div>
< / div>
<！ - End .form-group - >
< div class =form-group>
< label class =col-lg-2 col-md-3 control-labelfor =>电子邮件地址< / label>
< div class =col-lg-10 col-md-9>
< input id =emailng-model =CusDetails.emailtype =textclass =form-controlname =placeholderplaceholder =someone@example.com>
< / div>
< / div>
<！ - End .form-group - >
< / form>
< / div>
< / div>
<！ - End .panel - >
< / div>
<！ - 。col-9在此结束 - >
< / div>
<！ - End .row - >
<！ - Start .row - >
< div class =row>
< div class =col-md-1>< / div>
< div class =col-lg-9 col-sm-9 col-xs-12>
< button id =btnSubmittype =submitng-click =AddCustomer（）class =btn btn-info pad>< span class =fa fa-user-plus >< /跨度>添加客户< /按钮>
< button type =submitclass =btn btn-default pad>取消< / button>
< / div>
< / div>
< / diV>
< / div>
< / div>
解决方案
您可以移除表单字段值模型像
您的代码
var CustDetails = {
cname：$ scope.CusDetails.cname，
comname：$ scope.CusDetails.comname，
tel：$ scope.CusDetails。电话，
电子邮件：$ scope.CusDetails.email
};
以此替换
$ scope.CustDetails = {
cname：$ scope.CusDetails.cname，
comname：$ scope.CusDetails .comname，
电话：$ scope.CusDetails.tel，
电子邮件：$ scope.CusDetails.email
};
您的代码
customerForm。$ setPristine（true）;
以此替换
$ scope.CustDetails = {};
Been finding how to clear form data with the use of angular and $setPristine Function but still no results always gives me an error saying $setPristine is not a function. Can anyone kindly help me for a solution?
here's my angular.controller
$scope.AddCustomer = function () {
var CustDetails = {
cname: $scope.CusDetails.cname,
comname: $scope.CusDetails.comname,
tel: $scope.CusDetails.tel,
email: $scope.CusDetails.email
};
CustService.Customer(CustDetails, function (res) {
console.log(res);
$.extend($.gritter.options, {
position: 'bottom-right',
});
if (res.data == 'success') {
$.gritter.add({
title: 'Success!',
text: 'Successfully added the new customer ' + '<h4><span class="label label-primary">' + CustDetails.cname + '</span></h4>',
time: '5000',
close_icon: 'l-arrows-remove s16',
icon: 'glyphicon glyphicon-ok-circle',
class_name: 'success-notice'
});
//CustDetails = {};
customerForm.$setPristine(true);
}
else {
$.gritter.add({
title: 'Failed!',
text: 'Failed to add a new customer',
time: '5000',
close_icon: 'l-arrows-remove s16',
icon: 'glyphicon glyphicon-remove-circle',
class_name: 'error-notice'
});
}
});
}
Here's the Html code
<div ng-controller="AddCustomerController">
<div class="page-content-wrapper">
<div class="page-content-inner">
<div id="page-header" class="clearfix">
<div class="page-header">
<h2>Add Customer</h2>
<span class="txt">Create and add new customer.</span>
</div>
</div>
<!--Start .row-->
<div class="row">
<div class="col-md-1">
</div>
<div class="col-lg-9 col-sm-9 col-xs-12">
<!--col-lg-9 starts here-->
<div class="panel panel-default toggle panelMove panelClose panelRefresh">
<div class="panel-heading">
<h4 class="panel-title">Customer Details</h4>
</div>
<div class="panel-body pt0 pb0">
<form class="form-horizontal group-border stripped" id="customerForm">
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Customer Name</label>
<div class="col-lg-10 col-md-9">
<input type="text" required id="cname" ng-model="CusDetails.cname" class="form-control" name="cname" />
</div>
</div>
<!--end of .form-group-->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Company Name</label>
<div class="col-lg-10 col-md-9">
<input type="text" required id="comname" ng-model="CusDetails.comname" class="form-control" name="comname" />
</div>
</div>
<!--end of .form-group-->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Telephone Number</label>
<div class="col-lg-10 col-md-9">
<div class="input-group input-icon">
<span class="input-group-addon"><i class="fa fa-phone s16"></i></span>
<input ng-model="CusDetails.tel" class="form-control" id="ctel" type="text" placeholder="(999) 999-9999">
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Email address</label>
<div class="col-lg-10 col-md-9">
<input id="email" ng-model="CusDetails.email" type="text" class="form-control" name="placeholder" placeholder="someone@example.com">
</div>
</div>
<!-- End .form-group -->
</form>
</div>
</div>
<!--End .panel-->
</div>
<!--.col-9 ends here-->
</div>
<!--End .row-->
<!--Start .row-->
<div class="row">
<div class="col-md-1"></div>
<div class="col-lg-9 col-sm-9 col-xs-12">
<button id="btnSubmit" type="submit" ng-click="AddCustomer()" class="btn btn-info pad"><span class="fa fa-user-plus"></span> Add Customer</button>
<button type="submit" class="btn btn-default pad">Cancel</button>
</div>
</div>
</diV>
</div>
</div>
解决方案
You can remove form field value by removing value of ng-model like
Your code
var CustDetails = {
cname: $scope.CusDetails.cname,
comname: $scope.CusDetails.comname,
tel: $scope.CusDetails.tel,
email: $scope.CusDetails.email
};
Replace with this
$scope.CustDetails = {
cname: $scope.CusDetails.cname,
comname: $scope.CusDetails.comname,
tel: $scope.CusDetails.tel,
email: $scope.CusDetails.email
};
Your code
customerForm.$setPristine(true);
Replace with this
$scope.CustDetails={};
这篇关于如何以angularjs的形式清除或重置数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
