Question

我希望隐藏标签然后显示它们，但我面临一个令人耳目一新的问题。事实上，如果我选择一个图表，然后单击隐藏按钮以显示网格，它会隐藏其他选项卡，但它始终显示nvD3图表而不是ui-grid。即使在图表选项卡中，如果我选择选项卡2，然后单击隐藏按钮，然后显示按钮，它将激活第一个选项卡，但选择的第二个图表不是第一个。

<uib-tabset>
<uib-tab heading="Test1" ng-hide=hideCharts>
  <nvd3 options="options" data="data"></nvd3>
</uib-tab>
<uib-tab heading="Test2" ng-hide=hideCharts>
  <nvd3 options="options" data="data1"></nvd3>
</uib-tab>
<uib-tab heading="Test3" ng-hide=hideCharts>
  <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>

这是我正在尝试的示例plunker

Answer 1

ng-hide不会删除标签组件，这将导致其状态仍然被跟踪。我使用ng-if而不是ng-id修复了这个问题。这是一个带有解决方案的plunker

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

角度ui-tab隐藏后不清爽

1 个答案: