Question

UIb-tab未显示任何内容。简单＆＃34;标签＆＃34;工作得很好，但是他们失败了，所以我不得不切换到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>

已安装的版本＆＃34; angular＆＃34;：＆＃34; ~1.5.6＆＃34;

＆＃34; angular-bootstrap＆＃34;：＆＃34; ~2.3.1＆＃34;

＆＃34; angular-ui-bootstrap＆＃34;：＆＃34; 2.3.1＆＃34;

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

Answer 1

你安装了angular-ui
在标签中使用ng-if来渲染它们
此外，由于〜角1.5，应使用标签uib-tabset，uib-tab，uib-tab-heading

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

  <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>

Uib-tab不呈现任何内容

1 个答案: