如何将Jquery表单提交函数改为AngularJS函数？
如何将Jquery表单提交函数改为AngularJS函数？
提问于 2019-08-05 23:35:23
我有一个JQuery函数，如果我点击表单上的更新按钮，它就会触发。这是有效的。我计划将其更改为Angular JS指令。不知道该怎么做，我对Angular JS非常非常陌生。
我试着用Angular JS的方式对它进行编码，但我不确定如何像使用JQuery那样将整个表单数据传递给函数。
这是html文件，
form.HTML：
<form class="form-horizontal form-label-left input_mask" id="billingInfoForm" name="billingInfoForm">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<label class="control-label" for="firstName">First Name </label>
<input type="text" data-recurly="first_name" class="form-control" id="firstName" name="firstName"
ng-model="team.team_name">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<label class="control-label" for="lastName">Last Name </label>
<input type="text" class="form-control" id="lastName" name="lastName" data-recurly="last_name">
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 form-group has-feedback">
<label class="control-label" for="address1">Address</label>
<input type="text" data-recurly="address1" class="form-control" id="address1" name="address1"
ng-model="team.team_address.address1">
</div>
<div class="col-md-2 col-sm-2 col-xs-12 form-group has-feedback">
<label class="control-label" for="city">City</label>
<input type="text" class="form-control" id="city" name="city" data-recurly="city"
ng-model="team.team_address.city">
</div>
<div class="col-md-2 col-sm-2 col-xs-12 form-group has-feedback">
<label class="control-label" for="state">State <span class="required"></span></label>
<input type="text" class="form-control" id="state" name="state" data-recurly="state"
ng-model="team.team_address.region">
</div>
<div class="col-md-2 col-sm-2 col-xs-12 form-group has-feedback">
<label class="control-label" for="postal_code">Zipcode</label>
<input type="text" data-recurly="postal_code" class="form-control" id="postal_code"
name="postal_code" ng-model="team.team_address.postcode">
</div>
<div class="col-md-2 col-sm-2 col-xs-12 form-group has-feedback">
<label class="control-label" for="country">Country</label>
<input type="text" data-recurly="country" class="form-control" id="country" name="country"
ng-model="team.team_address.country">
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="margin-left-10">
<button type="submit" class="btn btn-success" ng-click="update()">Update</button>
</div>
</div>
</form>这是正在运行的JQuery函数。jQueryController.js
$('form').on('submit', function (event) {
event.preventDefault();
var form = this;
recurly.token(form, function (err, token) {
if (err) {
console.log(err);
} else {
somefunction();
form.submit();
}
});
});这是我正在尝试但不起作用的Angular JS方式: angularController.js：
$scope.update = function(event){
//event.preventDefault();
var form = 'billingInfoForm';
recurly.token(form, function (err, token) {
if (err) {
console.log(err);
} else {
somefunction();
form.submit();
}
});
}请告诉我我哪里做错了。谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-08-06 01:12:19
使用表单的元素，而不是字符串：
$scope.update = function(event){
//event.preventDefault();
̶v̶a̶r̶ ̶f̶o̶r̶m̶ ̶=̶ ̶'̶b̶i̶l̶l̶i̶n̶g̶I̶n̶f̶o̶F̶o̶r̶m̶'̶;̶
var formEl = document.getElementById('billingInfoForm');
var form = angular.element(formEl);
recurly.token(form, function (err, token) {
if (err) {
console.log(err);
} else {
somefunction();
form.submit();
}
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57361808
复制相关文章
相似问题
腾讯云开发者
