Javascript 在ng repear内部时，不应用移动角度UI选项卡样式

当使用mobilearangularui（）创建选项卡式控件时，一切正常，直到需要动态创建选项卡为止

因此，如果我采用以下代码：

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

表1


表2


表3

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

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

{{tab}}

绘制了正确的选项卡，但它们没有任何样式，只是显示为未设置样式的

---

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

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

资料来源：

将ng repeat移动到“li”中，而不是单独的带有ng repeat的“div”：

{{tab}}

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

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

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

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