Uib-tab没有渲染任何东西

Question

UIb-tab没有显示任何东西。简单的“标签”工作得很好，但一个场景来了，他们失败了，所以我不得不切换到uib-tabs.Below是我的代码和版本我用在我的项目中。

<div class="ui-tab-container"> 
    <uib-tabset active="currentTabIndex"> 
    <uib-tab heading="Region Wise" index="0" classes="my-tab" style="border: 1px solid #e9e9e9;"> 
     <br> 
     <br> 
     <table class="table table-hover table-striped table-bordered" ng-hide="mydata.length==1" ng-if="mydata.length>1"> 
     <thead style="background:lightskyblue;color:#ffffff"> 
      <!--<th>SL No</th>--> 
      <th>Region</th> 


      <th>RE Count</th> 

      <th ng-repeat="sale in mydata[0].cat_wise_sale | orderBy:'cat'">{{sale.cat}}</th> 
      <th>Total</th> 

      <th>Target</th> 
      <th>Achievement</th> 
     </thead> 
     <tbody> 
      <tr ng-repeat="ant in mydata | filter:textToSearch"> 
      <!--<td>{{$index+1}}</td>--> 
      <td ng-if="ant.region!='Total'"><a href ng-click="region_selected(ant.region)">{{ant.region}}</a> 
      </td> 
      <td ng-if="ant.region=='Total'">{{ant.region}}</td> 
      <td>{{ant.total_re}}</td> 

      <td ng-repeat="sale in ant.cat_wise_sale | orderBy:'cat'">{{sale.sale}}</td> 
      <td>{{ant.total_sale}}</td> 

      <td>{{ant.target_qty}}</td> 
      <td>{{ant.achievement}}</td> 

      </tr> 

     </tbody> 
     </table> 
    </uib-tab> 
    <uib-tab heading="Branch Wise" index="1" classes="my-tab" style="border: 1px solid #e9e9e9;" active="state_tab"> 

    </uib-tab> 
    <uib-tab heading="City Wise" index="2" style="border: 1px solid #e9e9e9;" classes="my-tab" active="city_tab"> 

    </uib-tab> 
    <uib-tab heading="Counter Wise" index="3" style="border: 1px solid #e9e9e9;" classes="my-tab" active="counter_tab"> 

    </uib-tab> 
    </uib-tabset> 
    <loading-data class="" ng-show="loading"></loading-data> 
    <br> 
    <br> 
    <br> 
</div> 

安装的版本 “角度”： “〜1.5.6”

“角自举”： “〜2.3.1”

“角-UI-自举”：“2.3 .1"

<script src="bower_components/angular/angular.js"></script> 
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> 

Answer 1

1. 你有没有安装角UI

2. 使用NG-如果选项卡，使它们

3. 而且，由于〜角1.5，应使用标签UIB-标签集，UIB标签，UIB标签，标题

这里是参考代码为你检查你安装的所有东西： -

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



    <uib-tabset> 
    <uib-tab heading="Test1" ng-if=hideCharts index="1"> 
     <nvd3 options="options" data="data"></nvd3> 
    </uib-tab> 
    <uib-tab heading="Test2" ng-if=hideCharts index="2"> 
     <nvd3 options="options" data="data1"></nvd3> 
    </uib-tab> 
    <uib-tab heading="Test3" ng-if=hideCharts index="3"> 
     <nvd3 options="options" data="data2"></nvd3> 
    </uib-tab> 
    <uib-tab heading="Test4"> 
     <div id="grid1" ui-grid="gridOptions" ui-grid-grouping class="grid"></div> 
    </uib-tab> 
    </uib-tabset>