根据条件移动导航选项卡

Question

如果满足条件，我需要将导航选项卡移动到订阅选项卡。我一无所知。非常感谢您的任何帮助。 我的 HTML 代码：

<div class="matches-tabs">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation"><a class="nav-link active" id="all-matches-tab" data-toggle="tab" href="#all-matches" role="tab" aria-controls="all-matches" aria-selected="true">Home</a></li>

        <li class="nav-item" role="presentation"><a class="nav-link" id="upcoming-matches-tab" data-toggle="tab" href="#upcoming-matches" role="tab" aria-controls="upcoming-matches" aria-selected="false">Upcoming Matches</a></li>

        
        <li class="nav-item" role="presentation"><a class="nav-link" id="Subscription-tab" data-toggle="tab" href="#Subscription" role="tab" aria-controls="Subscription" aria-selected="false">Subscription</a></li>
    </ul>

    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="all-matches" role="tabpanel" >
           Tab 1
        </div>
   
        <div class="tab-pane fade" id="upcoming-matches" role="tabpanel">
          Tab 2
        </div>
       
        <div class="tab-pane fade" id="Subscription" role="tabpanel">
        Tab 3
        </div>
    </div>
</div>

如果条件

if ($scope.balance >= matchfee){
//change the tab to subscription tab
}

满足将我的标签更改为订阅。

Answer 1

据我所知，您的 html 代码。您需要从 angularJS 控制器绑定您的 html 数据。例如。 https://material.angularjs.org/latest/demo/tabs '动态标签'。现在你只能使用 CSS 选择器来实现它

但如果你不想动态管理你的标签，你可以使用 ng-class 之类的

<li class="nav-item" role="presentation"><a class="nav-link active" id="all-matches-tab" data-toggle="tab" href="#all-matches" role="tab" aria-controls="all-matches" aria-selected="true">Home</a></li>

To => ng-class="isActiveTab ? 'active' : '' "