[英]Uib-tab is not rendering anything
UIb-tab is not displaying anything.Simple "tabs" were working great but a scenario came where they failed and so I had to switched to uib-tabs.Below is my code and the versions I used in my project. UIb-tab没有显示任何内容。简单的“ tabs”工作得很好,但是出现了失败的情况,因此我不得不切换到uib-tabs。下面是我的代码和我在项目中使用的版本。
<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>
Installed versions "angular": "~1.5.6" 已安装的版本“ angular”:“〜1.5.6”
"angular-bootstrap": "~2.3.1" “ angular-bootstrap”:“〜2.3.1”
"angular-ui-bootstrap": "2.3.1" “ angular-ui-bootstrap”:“ 2.3.1”
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
Have you installed angular-ui 你安装了angular-ui
use ng-if in tabs to render them 在标签中使用ng-if渲染它们
Also, since ~ angular 1.5, the tags uib-tabset, uib-tab, uib-tab-heading should be used 另外,由于角度为1.5,因此应使用标签uib-tabset,uib-tab,uib-tab-heading
here is reference code for u to check everything u installed:- 这是您检查您已安装的所有内容的参考代码:-
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.