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

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 に答える