Шаги мастера форм 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
};

Если кто-нибудь знает, пожалуйста, дайте мне знать.


jquery angularjs twitter-bootstrap jquery-form-wizard
person gihan-maduranga    schedule 09.02.2016    source источник
comment
вы можете использовать ng-show и скрыть функциональность   -  person Rahul harinkhede    schedule 09.02.2016
comment
@ У Рахула есть пример кода?   -  person gihan-maduranga    schedule 09.02.2016
comment
Вот пример, который показывает, как использовать настраиваемые кнопки в мастере начальной загрузки: vadimg.com/twitter-bootstrap-wizard-example/examples/   -  person Narendra CM    schedule 09.02.2016

Ответы (3)


arrow_upward
1
arrow_downward

Привет, видите, это рабочий пример, в котором я сначала показываю div 1, затем при нажатии на selectedext я показываю 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>

Может быть, это поможет вам

person Rahul harinkhede    schedule 09.02.2016
comment
спасибо, что поделились, но кажется длинным. Я нашел способ сделать это легко. Пожалуйста, обратитесь. - person gihan-maduranga; 09.02.2016

arrow_upward
1
arrow_downward 

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()            
};
person gihan-maduranga    schedule 09.02.2016

arrow_upward
1
arrow_downward

Хотя это поздний пост, он может помочь кому-то. Я использовал мастер начальной загрузки в директиве 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'); 
}

Это отлично работает для меня. Надеюсь, это поможет кому-то!

person Indhu    schedule 25.10.2016