在Angular中，如何從li刪除「selected」類然後將其應用於新li？

Question

在下面的代碼中（單擊演示），我如何從「Zero」li項目中刪除「selected」類並將其應用於「Two」li項目。換句話說，我如何首先清除當前選定的li，然後將「selected」類應用於新li？

在Demo代碼中，看起來removeClass（）被應用到新選擇的li中。最終的結果是沒有一個李的獲得「選擇」類。還要注意，如果你註釋掉JS代碼的第11行，「Zero」和「Two」都有「selected」類。目標是僅將「選定」類應用於「兩個」。

請指教。

Demo

Answer 1

試用this version。在查看角度應用程序時，您需要重新考慮您的方法。你的控制器不應該像這樣進行jQuery操作。相反，看看我的示例，看看DOM的所有狀態是如何由範圍數據狀態驅動的。我不需要跟蹤可能適用或不適用於給定元素的各種類，也不需要知道模板在做什麼。

做選擇邏輯的另一種方法是有一個單獨的作用域變量$scope.selected。然後你就可以擺脫select()範圍的功能，只是在做你的模板以下幾點：

<li ng-repeat="item in items" 
    ng-class="{selected: item == selected}" 
    ng=click="selected = item"> 
    {{item.text}} 
</li>