如何将 Jquery 表单提交功能更改为 AngularJS 功能？

Posted 2023-05-09

【中文标题】如何将 Jquery 表单提交功能更改为 AngularJS 功能？

【英文标题】：How to change the Jquery form submit function into AngularJS function?

【发布时间】：2019-12-13 04:00:29

【问题描述】：

我有一个 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】：

使用表单的元素，而不是字符串：

$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();
    
  );