我有一个有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>
这是我的控制器
mahalPlus.controller('familyRegistrationController', function($scope) {
$scope.abc = function(event){
event.preventDefault();
alert('submitted');
};
});
答案 0 :(得分:3)
preventDefault
是多余的,请参阅the docs。您只需要删除action
属性。
此外,它会阻止默认操作(表单意味着将请求发送到服务器并重新加载当前页面),但仅限于表单不包含操作属性。
相反,请将ng-app
添加到相应的HTML元素中,并确保正确加载控制器。
我已经创建了一个工作示例here,您可以在其中看到我建议的更改。
答案 1 :(得分:2)
1-删除操作
2-从ng-submit =&#34; abc($ event)&#34;
中删除$ event3-您最好考虑在标签中使用PHP,这不是一个好主意:(
答案 2 :(得分:0)
相信您可以删除表单上的操作。
答案 3 :(得分:0)
您是否已将控制器参考添加到表单标记中?
<form id="wizard" class="form-horizontal" ng-submit="abc($event)"
ng-controller="familyRegistrationController">