Angularjs-ui bootstrap.tabs - Adding Next tab button

Question

I am using a modal to display a series of tabs using

<div class="modal fade hide modal-creator" data-backdrop="static" modal="imageUploader" tabindex="-1" data-focus-on="input:first">
<div class="modal-header">
    <h3>Create New Gallery</h3>
</div>
<div class="modal-body" id="imageUploader_sort">
    <tabset>
        <tab ng-repeat="tab in tabs" active="tab.active" heading="{{tab.title}}" disabled="tab.disabled" select="tabName(tab.title)">
            <div ng-include="tab.content"></div>
        </tab>
    </tabs>

</div><!-- /modal-body -->

<div class="modal-footer">
    <button ng-click="close()" class="btn" >Close</button>
    <button ng-click="next()" class="btn" >Next</button>
</div>

Controller

    $scope.tabs = [
        { title:"Home", content:"/beta/application/views/images/uploader/create.html", active: true },
        { title:"Upload", content:"/beta/application/views/images/uploader/upload.html"},
        { title:"Edit", content:"/beta/application/views/images/uploader/edit.html"}
    ];
$scope.next = function()
    {
        console.log($scope.tabs);
    };

I am looking to create a solution to navigate through the tabs with a next button and when I reach the last page, turn the button into a finished button. Any guidance on this a great help Thanks

What have you tried so far? When the next button is clicked take the index of the current tab and set that tabs active property to false. Then increment the index and set that tabs active property to true, Continue this until you reach the length of the tabs array. Once you do change the label of the button to finished. — Jonathan Palumbo
– Jonathan Palumbo, Commented Aug 8, 2013 at 18:10
thanks. where I'm running into an issue is getting the index for the current tab. and passing with ng-click="next();" — SuperNinja
– SuperNinja, Commented Aug 8, 2013 at 18:21
Well you will probably start off at index 0 correct? So create a scope variable in your controller that defaults to 0. scope.tabIndex = 0;. Then you can access and increment this value from your $scope.next() function with no need to pass it in. — Jonathan Palumbo
– Jonathan Palumbo, Commented Aug 8, 2013 at 18:29
understood, but not having a set value skipping tabs then becomes an issue? — SuperNinja
– SuperNinja, Commented Aug 8, 2013 at 18:56
If you want to skip a tab you would just add 2 to $scope.tabIndex or click the next button twice. Check out this plunker. — Jonathan Palumbo
– Jonathan Palumbo, Commented Aug 8, 2013 at 19:23

OverZealous · Accepted Answer · 2013-08-08 19:47:56Z

4

Here's a more complete answer that handles both direct navigation as well as clicking Next for the button state.

Besides tracking the selected tab using the select attribute, I also changed the way the button is displayed, by splitting it into two buttons. This way the text is maintained within the view, and is independent of the model state.

<button ng-show="!isLastTab()" class="btn btn-small" ng-click="proceed()">Next</button>
<button ng-show="isLastTab()" class="btn btn-small" ng-click="proceed()">Finish</button>

The JS looks like this now:

$scope.selectedTab = 0;

$scope.tabSelected = function(index) {
    $scope.selectedTab = index;
}

var isLastTab = function() {
    return $scope.selectedTab === $scope.tabs.length-1;
}

$scope.isLastTab = isLastTab;

$scope.proceed = function() {
    if(!isLastTab()){
        $scope.selectedTab++;
        $scope.tabs[$scope.selectedTab].active = true;
    }
};

answered Aug 8, 2013 at 19:47

OverZealous

39.6k15 gold badges100 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

OverZealous Over a year ago

FYI: if you use the newer, unstable release of Angular instead, you can simplify the button by going back to one, without ng-show, and changing the label to {{ isLastTab() ? 'Finish' : 'Next' }}.

Jonathan Palumbo · Accepted Answer · 2013-11-12 18:21:50Z

This example should get you started down the right path.

http://plnkr.co/edit/h2J9nBSYtEI7hwCz2Xp8?p=preview

angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
  $scope.tabIndex = 0;
  $scope.buttonLabel = "Next";

  $scope.tabs = [
    { title:"Step 1", content:" content 1", active: true },
    { title:"Step 2", content:" content 2" },
    { title:"Step 3", content:" content 3" },
    { title:"Step 4", content:" content 4" }
  ];

  $scope.proceed = function() {
     if($scope.tabIndex !== $scope.tabs.length -1 ){
      $scope.tabs[$scope.tabIndex].active = false;
      $scope.tabIndex++
      $scope.tabs[$scope.tabIndex].active = true;
     }

     if($scope.tabIndex === $scope.tabs.length -1){
        $scope.buttonLabel = "Finish";
     }
  };

  $scope.setIndex = function($index){
      $scope.tabIndex = $index;
  };

};

Collectives™ on Stack Overflow

Angularjs-ui bootstrap.tabs - Adding Next tab button

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related