angular list item active（ng-click）

所以我想從一個列表項中添加/刪除一個類，全部取決於一個變量:(注意如果有更好的做這個活動的東西請讓我知道：P ）angular list item active（ng-click）

所以我的代碼如下所示：

<li ng-repeat="fold in folds" class="{{selectedFolder == fold.filter ? 'active' : ''}}"> 
    <a ng-click="selectedFolder = fold.filter"> 
     {{fold.name}} 
    </a> 
</li>

現在，當我點擊第一個不過class加一次我點擊下一個老class沒有被''替換，而不是現在二人li有classactive

有誰能告訴我爲什麼？

來源

2015-10-21 Marc Rasmussen

刪除'class'，加上'納克級= 「{ '主動'：selectedFolder == fold.filter}」' –

您可以使用ng-class

<li ng-repeat="fold in folds" ng-class="{'active' : selectedFolder == fold.filter}"> 
    ..... 
</li>

這將在selectedFolder == fold.filter是套的CSS類active添加到li元素true，IF selectedFolder == fold.filter是套到false那麼active類將從li元素中移除。

，如果你需要切換的CSS類，當點擊add & remove，我想你可以刪除.. ng-click="selectedFolder = fold.filter"...一部分，並與ng-click="selectedFolder = !selectedFolder"替換和更改ng-class到ng-class="{'active' : selectedFolder == 1}並添加ng-init="selectedFolder = 0"到li，這將添加一個變量ng-repeat範圍以便每個重複在其範圍內都有自己的selectedFolder變量(ng-repeat creates a child scope)。

時點擊<a>我們可以切換的selectedFolder值，以便將切換css class..<a ng-click="selectedFolder = !selectedFolder">..

這裏是DEMO

UPDATE

具有一個active元素。

創建一個變量來引用活動元素。（我使用的對象，因爲它易於引用從ng-repeat，因爲ng-repeat創建一個子範圍，所以我們不能直接調用，如果這個變量只是一個基本變量，如果它的基元我們必須使用$parent.variable_name），所以它容易使用一個對象代表它。

$scope.active = { 
    elm : -1 
}

當點擊<a>的$index值分配給active.elm

<a ng-click="active.elm = $index"> 
..

$index是ng-repeat指數就像

的第一重複$index is equals to 0 爲第二次重複$index is equals to 1 ..像明智的。

更改ng-class到，這將添加類active當active.elm == $index設置爲true。

..ng-class="{'active' : active.elm == $index}"> 
...

這裏是DEMO

來源

2015-10-21 12:22:53

餵你反應感謝，但有沒有方式只允許1有「積極」類？在你的例子中，我得到了同樣的結果，因爲我現在允許多個列表項被激活 –

:)更新請看看。 –

最後的更新非常出色。 –

使用納克級

<li ng-repeat="fold in folds" ng-class="{{selectedFolder == fold.filter ? 'active' : ''}}"> 
    <a ng-click="selectedFolder = fold.filter"> 
     {{fold.name}} 
    </a> 
</li>

來源

2015-10-21 12:19:40

angular list item active（ng-click）

回答

相關問題