javascript - 带有提交输入的 AngularJS ajax 表单提交

Question

我有一个带有 stepy 向导的表单。对于工作 stepy 向导，必须使用输入提交按钮而不是按钮。所以我正在使用提交按钮，但是在单击提交按钮时它会重定向到主页。 我的代码

<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>

这是我的 Controller

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

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

});

Answer 1

preventDefault 是多余的，参见 the docs .您只需删除 action 属性即可。

Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page) but only if the form does not contain an action attribute.

相反，将 ng-app 添加到适当的 HTML 元素并确保您的 Controller 已正确加载。

我创建了一个工作示例 here ，您可以在其中看到我建议的更改。