根据情况移动导航选项卡

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类

<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' : '' "