AngularJs更新類的元素

Question

我很新，使用AngularJS，所以我不知道這一點。我在我的應用程序的一個部分一個導航欄，這樣的事情有：

<ul class='nav nav-pills nav-stacked'> 
    <li class='active'> 
     <a>Element 1</a> 
    </li> 
    <li> 
     <a>Element 2</a> 
    </li> 
</ul> 

在同一頁上，我有一對夫婦的標籤窗格

<div role="tabpanel"> 
    <ul class="nav nav-tabs" role="tablist"> 
     <li role="presentation" class="active"><a href="#Element 1" role="tab" data-toggle="tab">element 1</a></li> 
     <li role="presentation" class="active"><a href="#Element 2" role="tab" data-toggle="tab">element 2</a></li> 
    </ul> 
</div> 

一切工作預期，但我想要的是導航來反映選項卡的狀態，所以當選項卡'元素1'爲active時，導航項目元素1獲得類別active。

有沒有一種簡單的方法來實現這一目標使用angularJS？

我可以通過聽取標籤觸發的事件來顯示或隱藏這些事件，但這似乎有點複雜，我想知道是否使用Angular可以更輕鬆地完成此操作。

順便說一句，我使用的自舉3，如果該事項。

Answer 1

可以使用納克級。例如：

<li role="presentation" ng-class="{active: activeTab=='HomeTab'}">Home</li> 
<li role="presentation" ng-class="{active: activeTab=='ItemsTab'}">Items</li> 

更多的例子和細節在這裏概述：http://scotch.io/tutorials/javascript/the-many-ways-to-use-ngclass

Answer 2

嘗試使用納克級來設置基於被一個標籤上點擊時設置的變量的活動類。

<ul class="nav nav-pills nav-stacked"> 
    <li class="active" ng-class="{'active':isActive(1)}"> 
     <a>Element 1</a> 
    </li> 
    <li ng-class="{'active':isActive(2)}"> 
     <a>Element 2</a> 
    </li> 
    </ul> 
</div> 
<div role="tabpanel"> 
    <ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation" class="active"> 
     <a href="#Element 1" role="tab" data-toggle="tab" ng-click="setActive(1)">element 1</a> 
    </li> 
    <li role="presentation" class="active"> 
     <a href="#Element 2" role="tab" data-toggle="tab" ng-click="setActive(2)">element 2</a> 
    </li> 
    </ul> 

您的控制器代碼如下所示。

var activeIndex = 1; 

    $scope.isActive = function(index) 
    { 
    if(index == activeIndex) 
    { 
     return true 
    } 
    } 
    $scope.setActive = function(index) 
    { 
    activeIndex = index; 
    } 

這是一個嘗試它的普及。 http://plnkr.co/edit/KWn4SZ1xUicaorMjM1Fh?p=preview