动态创建导航选项卡，一个是活动的，另一个不是

Question

我想动态创建导航标签。 选项卡中的第一个元素应包含活动类，其余部分不应包含活动类。怎么实现呢？

这是我的代码：

<div class="tab-pane fade" id="o{{gridTeams[$index].name}}">
    <div class="tabbable">
        <div>
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href=
                    "#c{{storageOption.StorageHostname}}">Data{{storageOption.StorageHostname}}</a>
                </li>
            </ul>
        </div>

        <div class="tab-content">
            <div class="tab-pane fade active in" id=
            "c{{storageOption.StorageHostname}}">
                <div class="tab-content">
                    <table class="table table-stripped" style=
                    "width: 500px;">
                        <tbody>
                            <tr>
                                <td>Name</td>

                                <td>test-ns120-01</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

我需要在下一次迭代中从此行中删除活动类，这样只有一个选项卡应保持活动状态。

<li class="active">
  <a href="#c{{storageOption.StorageHostname}}">
    Data{{storageOption.StorageHostname}}
  </a>
</li>

Answer 1

var mainModuleName = 'mean';

var mainModule = angular.module(mainModuleName, ['ngRoute', 'example', 'users']);

mainModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('!');
}]);

if (window.location.hash === '#_=_') window.location.hash - '#!';

angular.element(document).ready(function() {
  angular.bootstrap(document, [mainModuleName]);
});