Question

我正在处理角度引导标签。我想在用户浏览选项卡时在每个选项卡中显示不同的内容。我无法在各个标签中显示内容。请找到演示here

js code：

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。任何建议都会有所帮助。

Answer 1

这是如何实现它我已经更新了你的html，因为有很多end div标签丢失，我只是根据你的代码风格添加条件

<div ng-app="tabs">

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<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">
            <div ng-if="tabName === 'Tab1'" 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>

            <div ng-if="tabName === 'Tab2'" 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>

Answer 2

快速做出要求的方法是使用ng-include。见plunker example

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

    $scope.tabs = [
      {"tabName":"Tab1","tabValue":"tab1Value","templateURL":"tab1.html"},
      {"tabName":"Tab2","tabValue":"tab2Value","templateURL":"tab2.html"}
    ];

});

<div ng-app="tabs">

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

  <div ng-controller="tabsctrl">
    <uib-tabset>
      <uib-tab ng-repeat="tab in tabs" heading="{{tab.tabName}}" active="tab.active" disable="tab.disabled">
        <div ng-include="tab.templateURL"></div>
      </uib-tab>
    </uib-tabset>
  </div>
</div>

Answer 3

您似乎正在尝试显示一些标签按钮，以根据所选标签切换内容。我不确定您是否只是尝试显示所选标签的内容或所有标签的某些内容以及所选标签的额外内容，因此我提供了两者的示例。

Plunker example

function controller($scope){
    $scope.tabs = [
        {name: 'Tab 1', value1: 'Tab 1 value 1', value2: 'Tab 1 value 2'},
        {name: 'Tab 2', value1: 'Tab 2 value 1', value2: 'Tab 2 value 2'},
    ];
    $scope.selectedTab = $scope.tabs[0];

    $scope.selectTab = function(tab){
        $scope.selectedTab = tab;
    };
}

Html示例1

<div ng-repeat="tab in tabs"
     ng-click="selectTab(tab)"
     ng-class="{'selected': tab == selectedTab}">
    {{tab.name}}
</div>
<div class="tab-content">
    {{selectedTab.value1}}
</div>

Html示例2

<div ng-repeat="tab in tabs"
     ng-click="selectTab(tab)"
     ng-class="{'selected': tab == selectedTab}">
    {{tab.name}}
</div>
<div ng-repeat="tab in tabs">
  {{tab.value1}}
  <div ng-if="tab === selectedTab">
    {{tab.value2}}
  </div>
</div>

显然，无论你喜欢什么，你都可以设计和构建它。你不应该需要任何特殊的东西来实现你想要的东西。

我建议你不要使用$ rootScope，我不确定你在这里实现了什么。我还建议你尽可能使用指令或组件，而不是将'ng-controller'附加到任意的html位。

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

3 个答案: