Angularjs-ui bootstrap.tabs-添加下一个选项卡按钮

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

Answer 1

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

Answer 2

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

};