Question

我正在使用模式使用

显示一系列标签

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

控制器

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

我希望创建一个解决方案，使用下一个按钮浏览选项卡，当我到达最后一页时，将按钮变为完成按钮。任何指导对此都有很大的帮助感谢

Answer 1

Here's a more complete answer处理直接导航以及单击按钮状态的下一步。

除了使用select属性跟踪选定的选项卡外，我还通过将其分成两个按钮来更改按钮的显示方式。这样，文本在视图中维护，并且与模型状态无关。

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

JS现在看起来像这样：

$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

这个例子应该让你开始走正确的道路。

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

};

Angularjs-ui bootstrap.tabs - 添加下一个标签按钮

2 个答案: