Jquery 带有自定义按钮的引导表单向导步骤
我正在使用引导表单向导创建HTML表单。我的表单中有一个自定义链接/按钮。我添加了一个用于导航的自定义按钮，而不是默认的Next按钮。我的要求是，当单击按钮时，如何导航到另一个选项卡内容？通过AngularJs函数自定义按钮逻辑句柄 HTML标记Jquery 带有自定义按钮的引导表单向导步骤,jquery,angularjs,twitter-bootstrap,jquery-form-wizard,Jquery,Angularjs,Twitter Bootstrap,Jquery Form Wizard,我正在使用引导表单向导创建HTML表单。我的表单中有一个自定义链接/按钮。我添加了一个用于导航的自定义按钮，而不是默认的Next按钮。我的要求是，当单击按钮时，如何导航到另一个选项卡内容？通过AngularJs函数自定义按钮逻辑句柄 HTML标记 <div class="form-actions"> <div class="row"> <div class="col-sm-12"> <ul class="pager wizard
<div class="form-actions">
<div class="row"> <div class="col-sm-12">
<ul class="pager wizard no-margin">
<!--<li class="previous first disabled">
<a href="javascript:void(0);" class="btn btn-lg btn-default"> First </a>
</li>--> <!--<li class="next last">
<a href="javascript:void(0);" class="btn btn-lg btn-primary"> Last </a> </li>-->
<li class="next"><a href="javascript:void(0);"
class="btn btn-lg txt-color-blue" ng-click="setupNext()"> Next </a></li> </ul>
</div>
</div>
</div>
如果有人知道，请告诉我。您好，这是一个工作示例，我首先显示div 1，然后单击shownext显示div 2，单击next显示div 3，然后单击next再次显示di3 这是plunker链接
//代码在这里
var-app=angular.module（'myApp'，[]）；
应用控制器（'IndexCtrl'，函数（$scope）{
$scope.showDiv1=true；
$scope.showDiv2=false；
$scope.showDiv3=false；
$scope.showNext=函数（toshow）{
$scope.showDiv1=false；
$scope.showDiv2=false；
$scope.showDiv3=false；
如果（toshow==“showDiv1”）{
$scope.showDiv1=true；
}else if（toshow==“showDiv2”）{
$scope.showDiv2=true；
}否则{
$scope.showDiv3=true；
}
}
});
我是第一组
下一个节目
我是二组
下一个节目
我是第三组
下一个节目
虽然这是一篇迟发的帖子，但它可能会帮助一些人。
我在angularjs指令中使用了引导向导
.directive('rootwizard', function($route){
return {
require : '?^ngModel',
link: function(scope, element, attrs, ngModel){
element.bootstrapWizard({
onTabClick: function(tab, navigation, index) {
return false;
},
onNext: function(tab, navigation, index) {
return false;
},
onPrevious: function(tab, navigation, index){
return true;
},
onTabShow: function(tab, navigation, index) {
ngModel.$setViewValue(index);
ngModel.$render();
}
});
}
};
})
html代码：：
<div id="rootwizard" rootwizard ng-model="curIndex">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills nav-wizard">
<li>
<a href="#tab1" class="long" data-target="#tab1" data-toggle="tab"> Tab1</a>
<div class="nav-arrow"></div>
</li>
<li>
<div class="nav-wedge"></div>
<a href="#tab2" class="long" data-target="#tab2" data-toggle="tab"> Tab2</a>
<div class="nav-arrow"></div>
</li>
<li>
<div class="nav-wedge"></div>
<a href="#tab3" class="long" data-target="#tab3" data-toggle="tab"> Tab3</a>
<div class="nav-arrow"></div>
</li>
<li>
<div class="nav-wedge"></div>
<a href="#tab4" class="long" data-target="#tab4" data-toggle="tab"> Tab4</a>
<div class="nav-arrow"></div>
</li>
<li>
<div class="nav-wedge"></div>
<a href="#tab5" class="long" data-target="#tab5" data-toggle="tab"> Tab5</a>
<div class="nav-arrow"></div>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane wave" id="tab1">
1
</div>
<div class="tab-pane wave" id="tab2">
2
</div>
<div class="tab-pane wave" id="tab3">
3
</div>
<div class="tab-pane wave" id="tab4">
4
</div>
<div class="tab-pane wave" id="tab5">
5
</div>
<ul class="pager wizard">
<li class="previous" ><a href="" id="prebtn" ng-click="getPreviousTab(curIndex)">Previous</a></li>
<li class="next" ><a href="" id="nxtbtn" ng-click="getNextTab(curIndex)">Next</a></li>
</ul>
</div>
</div>
这对我很有用。希望它能帮助别人 您可以使用ng show and hide Function@Rahul有任何示例代码段吗？下面是一个示例，演示如何在引导表单向导中使用自定义按钮-感谢分享，但看起来很冗长。我找到了一种方法来轻松完成此操作。请参考。
$scope.setupNext = function() {
//you can handle form logic here
wizardNext()
};
$scope.setupNext2 = function() {
//you can handle form logic here
wizardNext()
};
.directive('rootwizard', function($route){
return {
require : '?^ngModel',
link: function(scope, element, attrs, ngModel){
element.bootstrapWizard({
onTabClick: function(tab, navigation, index) {
return false;
},
onNext: function(tab, navigation, index) {
return false;
},
onPrevious: function(tab, navigation, index){
return true;
},
onTabShow: function(tab, navigation, index) {
ngModel.$setViewValue(index);
ngModel.$render();
}
});
}
};
})
<div id="rootwizard" rootwizard ng-model="curIndex">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills nav-wizard">
<li>
<a href="#tab1" class="long" data-target="#tab1" data-toggle="tab"> Tab1</a>
<div class="nav-arrow"></div>
</li>
<li>
<div class="nav-wedge"></div>
<a href="#tab2" class="long" data-target="#tab2" data-toggle="tab"> Tab2</a>
<div class="nav-arrow"></div>
</li>
<li>
<div class="nav-wedge"></div>
<a href="#tab3" class="long" data-target="#tab3" data-toggle="tab"> Tab3</a>
<div class="nav-arrow"></div>
</li>
<li>
<div class="nav-wedge"></div>
<a href="#tab4" class="long" data-target="#tab4" data-toggle="tab"> Tab4</a>
<div class="nav-arrow"></div>
</li>
<li>
<div class="nav-wedge"></div>
<a href="#tab5" class="long" data-target="#tab5" data-toggle="tab"> Tab5</a>
<div class="nav-arrow"></div>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane wave" id="tab1">
1
</div>
<div class="tab-pane wave" id="tab2">
2
</div>
<div class="tab-pane wave" id="tab3">
3
</div>
<div class="tab-pane wave" id="tab4">
4
</div>
<div class="tab-pane wave" id="tab5">
5
</div>
<ul class="pager wizard">
<li class="previous" ><a href="" id="prebtn" ng-click="getPreviousTab(curIndex)">Previous</a></li>
<li class="next" ><a href="" id="nxtbtn" ng-click="getNextTab(curIndex)">Next</a></li>
</ul>
</div>
</div>
scope.curIndex = 0;
scope.getPreviousTab = function(id){
angular.element('[data-target="#tab'+id+'"]').tab('show');
}
scope.getNextTab = function(id){
var nextTabVal = id + 1;
angular.element('[data-target="#tab'+nextTabVal+'"]').tab('show');
}