2

我正在使用模态显示一系列选项卡

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

我正在寻找一个解决方案来使用下一步按钮浏览选项卡，当我到达最后一页时，将按钮变成完成按钮。对此有很大帮助的任何指导谢谢

4

2 回答 2

4

这是一个更完整的答案，可以处理直接导航以及单击按钮状态的下一步。

除了使用属性跟踪选定的选项卡外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;
    }
};
于 2013-08-08T19:47:56.397 回答
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;
  };

};
于 2013-08-08T19:36:59.660 回答