javascript - 在 Angular 中，如何从 li 中删除 "selected"类，然后将其应用到新的 li 中？

Question

在下面的代码中(单击演示)，如何从“零”李项目中删除“选定”类并将其应用于“二”李项目。换句话说，如何先清除当前选定的li，然后将“选定”类应用到新的li？

在演示代码中，removeClass() 似乎甚至应用于新选择的 li。最终结果是没有一个李获得“选定”类别。另请注意，如果注释掉 JS 代码的第 11 行，“Zero”和“Two”都具有“selected”类。目标是仅将“选定”类应用于“二”。

请指教。

Demo

Answer 1

试试 this version 。在查看 Angular 应用程序时，您需要重新考虑您的方法。你的 Controller 不应该像现在这样进行 jquery 操作。相反，请查看我的示例，了解 DOM 的所有状态是如何由范围数据状态驱动的。我不需要跟踪可能或可能不应用于给定元素的各种类，我什至根本不需要知道模板正在做什么。

执行选择逻辑的另一种方法是使用单独的范围变量$scope.selected。然后，您可以摆脱 select() 范围函数，只需在模板中执行以下操作:

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