AngularJS ajax表單提交並提交輸入

Question

我有一個帶有步進向導的表格。要使用步進向導，必須使用輸入提交按鈕而不是按鈕。所以我使用的是提交按鈕，但是單擊提交按鈕時它會重定向到主頁。 我的密碼

<form action="#" id="wizard" class="form-horizontal"  ng-submit="abc($event)">
   <!-- Step 1 -->
   <fieldset title="Step 1">
      <legend>Registration</legend>
      <div class="form-group">
         <label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_house_number'); ?></label>
         <div class="col-md-3"><input type="text" class="form-control"  required="required" ng-model="newItem.housenumber"/></div>
         <label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_house_name'); ?></label>
         <div class="col-md-3"><input type="text" class="form-control"  required="required" ng-model="newItem.housename"/></div>
      </div>
   </fieldset>
   <fieldset title="Step 2">
      <legend>Registration</legend>
      <div class="form-group">
      <label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_place'); ?></label>
      <div class="col-md-3"><input type="text" class="form-control"  required="required" ng-model="newItem.place"/></div>
      <label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_land_mark'); ?></label>
      <div class="col-md-3"><input type="text" class="form-control"   ng-model="newItem.language"/></div>
   </fieldset>
   <fieldset title="Step 3">
      <legend><?php echo $this->lang->line('label_fac'); ?></legend>
      <div class="form-group">
         <label class="col-sm-3 control-label"></label>
         <div class="col-sm-6">
            <label class="radio-inline">
            <input type="checkbox"  ng-model="newItem.electricity"  value="electricity" /><?php echo $this->lang->line('label_electricty'); ?>
            </label>
         </div>
      </div>
   </fieldset>
   <fieldset title="Step 4">
      <legend>Agriculture</legend>
      <div class="form-group">
         <label class="col-sm-3 control-label"></label>
         <div class="col-sm-6">
            <label class="radio-inline">
            <input type="checkbox"  ng-model="newItem.cocunut"  value="cocunut" /><?php echo $this->lang->line('label_cocunut'); ?>
            </label>
         </div>
      </div>
   </fieldset>
   <fieldset title="Step 5">
      <legend> Other</legend>
      <div class="form-group">
         <label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_get_any_help'); ?></label>
         <div class="col-md-3"><input type="text" class="form-control"   ng-model="newItem.help"/></div>
         <label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_source'); ?></label>
         <div class="col-md-3"><input type="text" class="form-control"   ng-model="newItem.source"/></div>
      </div>
   </fieldset>
   <input type="submit" class="finish btn-success btn" value="Submit"/>
</form>

這是我的控制器

mahalPlus.controller('familyRegistrationController', function($scope) {

  $scope.abc = function(event){
    event.preventDefault();
    alert('submitted');
  };

});

Answer 1

preventDefault是多余的，請參閱docs 。 您只需要刪除action屬性。

此外，它僅在表單不包含action屬性時才阻止默認操作（對於表單，這意味着將請求發送到服務器並重新加載當前頁面）。

而是將ng-app添加到適當的HTML元素中，並確保已正確加載控制器。

我在這里創建了一個工作示例，您可以在其中看到我建議的更改。

Answer 2

1-刪除動作

2-從ng-submit =“ abc（$ event）”中刪除$ event

3-您最好考慮在標記中使用PHP，這不是一個好主意：(

Answer 3

相信您可以刪除表單上的操作。

Answer 4

您是否將控制器引用添加到表單標簽？

    <form id="wizard" class="form-horizontal"  ng-submit="abc($event)" 
ng-controller="familyRegistrationController">