带有自定义按钮的引导表单向导步骤答案

【问题标题】：Bootstrap form wizard steps with custom buttons带有自定义按钮的引导表单向导步骤
【发布时间】：2016-02-09 06:52:02
【问题描述】：

我正在使用引导表单向导来创建 HTML 表单。我的表单中有一个自定义链接/按钮。我添加了一个用于导航的自定义按钮，而不是默认的 Next 按钮。我的要求是单击按钮时，如何导航到另一个选项卡内容？通过 AngularJs 函数自定义按钮逻辑句柄。

HTML 标记

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

AngularJs 代码：

$scope.setupNext = function() {
    //how can I navigate to next tab or specific tab using jQuery
};

如果有人知道，请告诉我。

【问题讨论】：

你可以使用 ng-show 和 hide 功能
@Rahul 有任何示例代码 sn-p 吗？
这是一个示例，展示了如何在引导表单向导中使用自定义按钮 - vadimg.com/twitter-bootstrap-wizard-example/examples/…

标签： jquery angularjs twitter-bootstrap jquery-form-wizard

【解决方案1】：

您好，这是我最初显示 div 1 的工作示例，然后单击 showext 时显示 div 2，单击 next 我显示 div 3，然后再次显示 di3

这个是链接

// Code goes here

var app = angular.module('myApp', []);

app.controller('IndexCtrl', function($scope) {

  $scope.showDiv1 = true;
  $scope.showDiv2 = false;
  $scope.showDiv3 = false;
  $scope.showNext = function(toshow) {
    $scope.showDiv1 = false;
    $scope.showDiv2 = false;
    $scope.showDiv3 = false;
    if (toshow == "showDiv1") {
      $scope.showDiv1 = true;
    } else if (toshow == "showDiv2") {
      $scope.showDiv2 = true;
    } else {
      $scope.showDiv3 = true;
    }

  }

});

<!DOCTYPE html>
<html>

<head>
  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />


  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

  <script src="script.js"></script>
</head>

<body ng-app="myApp" dir="rtl">
  <div ng-controller="IndexCtrl">
    <div ng-show="showDiv1">
      <h1>this is div 1 </h1>
      <button ng-click="showNext('showDiv2')">Show Next</button>
    </div>
    <div ng-show="showDiv2">
      <h1>this is div 2 </h1>
      <button ng-click="showNext('showDiv3')">Show Next</button>
    </div>
    <div ng-show="showDiv3">

      <h1>this is div 3 </h1>
      <button ng-click="showNext('showDiv1')">Show Next</button>

    </div>
  </div>
</body>

</html>

也许这会对你有所帮助

【讨论】：

感谢分享，但似乎很长。我找到了一种方法可以轻松做到这一点。请参考。

【解决方案2】：

function wizardNext(){
    $('#bootstrap-wizard-1').bootstrapWizard({
    'tabClass': 'form-wizard',
    'onNext': function (tab, navigation, index) {
     var $valid = $("#wizard-1");
     if (!$valid) {
     $validator.focusInvalid();
         return false;
    } else {
    $('#bootstrap-wizard-1').find('.form-wizard').children('li').eq(index - 1).addClass('complete');
    $('#bootstrap-wizard-1').find('.form-wizard').children('li').eq(index - 1).find('.step') .html('<i class="fa fa-check"></i>');
          }
         }
     });
    }

函数调用

$scope.setupNext = function() {
    //you can handle form logic here
      wizardNext()            
};

$scope.setupNext2 = function() {
      //you can handle form logic here
      wizardNext()            
};

【讨论】：

【解决方案3】：

虽然这是一篇迟到的帖子，但它可能会对某人有所帮助。我在 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">&nbsp;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">&nbsp;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">&nbsp;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">&nbsp;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">&nbsp;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'); 
}

这对我很有用。希望它可以帮助某人！

【讨论】：