Question

使用mobile-angular-ui（http://mobileangularui.com/demo/#/tabs）创建选项卡式控件时，一切正常，直到我需要动态创建选项卡。

所以，如果我采用以下代码：

<ul class="nav nav-tabs" ui-state='activeTab' ui-default='1'>
  <li ui-class="{'active': activeTab == 1}">
    <a ui-set="{'activeTab': 1}">Tab 1</a>
  </li>
  <li ui-class="{'active': activeTab == 2}">
    <a ui-set="{'activeTab': 2}">Tab 2</a>
  </li>
  <li ui-class="{'active': activeTab == 3}">
    <a ui-set="{'activeTab': 3}">Tab 3</a>
  </li>
</ul>

一切都很好。但是，如果我在以下内容中添加以下内容：

<ul class="nav nav-tabs" ui-state='activeTab' ui-default='1'>
   <div ng-repeat="tab in allTabs">
      <li ui-class="{'active': activeTab == 1}">
        <a ui-set="{'activeTab': 1}">{{tab}}</a>
      </li>
   </div>
    </ul>

绘制了正确的标签，但它们没有任何样式，只是显示为没有样式的

如何让Mobile Angular UI重新应用样式（或至少第一次正确绘制）。

Answer 1

<ul class="nav nav-tabs">
     <li ng-repeat="wl in watchlist" ui-class="{'active': activeTab == {{wl.index}}}" ng-click="selectedWatchlistTab(wl)">
     <a ui-set="{'activeTab': {{wl.index}}}">{{wl.name}}</a>
     </li>
</ul>

以上代码应该适合你。

watchlist = [{name：watchlist1，index：0}，{name：watchlist2，index：1}，{name：watchlist3，index：3}]

Tabs - Angular UI

Answer 2

这是因为通过引入位于ul.nav和后代li之间的DIV元素，您正在改变HTML的结构，这使得CSS样式规则不再适用。

http://mobileangularui.com/demo/#/tabs来源：

<div class="btn-group justified nav-tabs">
  <a class="btn btn-default active" ui-class="{'active': activeTab == 1}" ui-set="{'activeTab': 1}">Tab 1</a>
  <a class="btn btn-default" ui-class="{'active': activeTab == 2}" ui-set="{'activeTab': 2}">Tab 2</a>
  <a class="btn btn-default" ui-class="{'active': activeTab == 3}" ui-set="{'activeTab': 3}">Tab 3</a>

及其CSS：

.btn-group > .btn-default.active, .btn-group > .btn-default.active:focus {
  background-color: #007aff;
  border-color: #006ee6;
  color: #fff;
}

而不是单独的＆＃34; div＆＃34;使用ng-repeat，将ng-repeat移动到＆＃34; li＆＃34;本身：

<ul class="nav nav-tabs" ui-state='activeTab' ui-default='1'>
  <li ng-repeat="tab in allTabs" ui-class="{'active': activeTab == 1}">
    <a ui-set="{'activeTab': 1}">{{tab}}</a>
  </li>
</ul>

在ng-repeat内部时不应用Mobile Angular UI Tab样式

2 个答案: