javascript - 在 ng-repeat 内部时，移动 Angular UI 选项卡样式未应用

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>

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

如何让 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>

Above code should work for you.

watchlist = [{name:watchlist1,index:0},{name:watchlist2,index:1},{name:watchlist3,index:3}]

Tabs - Angular UI