要在各个选项卡中显示的选项卡数据

【问题标题】：tab data to be displayed in individual tabs要在各个选项卡中显示的选项卡数据
【发布时间】：2017-10-31 16:02:51
【问题描述】：

我正在研究角度引导选项卡。当用户浏览选项卡时，我想在每个选项卡中显示不同的内容。 我无法在单个选项卡中显示内容。请找demohere

js代码：

var myApp = angular.module('tabs', [ 'ui.bootstrap']);
myApp.controller('tabsctrl', function ($rootScope,$scope) {
          $rootScope.tabName ='MyTab Name';

    $rootScope.tabValue="tab1Value";
    $scope.applicationData = {};
    $scope.activeModule = "tab1Value";
    $scope.programModules=[{"tabName":"Tab1","tabValue":"tab1Value"},{"tabName":"Tab2","tabValue":"tab2Value"}];
    $scope.loadApplicationData = function(tabVal,tabName){
        $rootScope.tabName =tabName;
     alert("$rootScope.tabName :: "+$rootScope.tabName);
        $rootScope.tabValue=tabVal;
        $scope.activeModule = tabVal;

    }; 
    $scope.loadApplicationData($scope.activeModule,'Tab1');


});

html代码：

<div ng-controller="tabsctrl">
 <div class="top-tabs">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist" >
            <li role="presentation" class="{{ pg.tabValue == activeModule? 'active':''}}" ng-repeat="pg in programModules">
                <a href="javascript:void(0)"  ng-click="loadApplicationData(pg.tabValue,pg.tabName)" >{{pg.tabName}}</a>
            </li>
        </ul>

         <div class="tab-content">
          <!--Tab1 data div-->
            <div role="tabpanel" class="tab-pane active" id="tab1">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                 Tab1 data
                            </div>This should be shown when user click tab1
                            </div>
                            </div><div></div>
              <!--Tab2 data div-->
              <div role="tabpanel" class="tab-pane active" id="tab2">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                 Tab2 data
                            </div>This should be shown when user click tab2
                            </div>
                            </div><div></div>  </div>
                            </div></div>

当用户点击tab1时，应该显示tab1 div，同样当用户点击Tab2时，应该显示tab2数据并且应该选择Tab2。任何建议都会有所帮助。

【问题讨论】：

• @charlietfl - 目前这是我的示例链接 plnkr.co/edit/PoAKHeZuBly5TWYWMOxF?p=info 。我可以使用相同的 js 代码来实现我的应用程序中的功能吗？我已经有了这个代码。谢谢
• 阅读 angular-ui-bootstrap 选项卡文档。您没有使用他们的指令，但您将模块包含在页面中
• 正如 charlietfl 所提到的，使用 Angular UI Bootstrap。这是您要查找的信息angular-ui-bootstrap 这是example
• @pedro - 谢谢，我理解，但作为一个面临困难的新手。正如我在帖子中提到的，我将在选项卡中显示多个

  ，并且每个选项卡都有要显示的唯一数据。对于您提到的示例，我不能直接在我的页面中使用

  。请指教。
• @pedro - 感谢您提供示例链接。我认为这应该可行，但如何在选项卡中显示相应的

  。请参阅plnkr.co/edit/fv8oevUUOeVEDXmv1LcF?p=preview。当用户点击 tab1 时，应该显示 tab1 div，当用户点击 tab2 时，应该显示 tab2 div，请建议需要进行哪些更改。