在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>