Question

我正在使用bootstrap表单向导来创建HTML表单。我的表单中有一个自定义链接/按钮。我没有使用默认的下一步按钮，而是添加了一个用于导航的自定义按钮。我的要求是，当单击按钮时，如何导航到另一个选项卡内容？通过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
};

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

Answer 1

嗨，看到这是一个工作示例，我最初显示div 1然后点击shownext我显示div 2和点击下一个我显示div 3然后我再次显示di3

这是plunker链接

＆＃13;

// 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;
    }

  }

});

＆＃13;

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

＆＃13;

这可能会帮助你

Answer 2

虽然这是一个迟到的帖子，但它可能对某人有帮助。我在angularjs的指令中使用了bootstrap向导。

.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'); 
}

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

Answer 3

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()            
};

Bootstrap表单向导使用自定义按钮

3 个答案: