使用 Angular 在列表中切换类

Question

我想在使用 AngularJS 单击一个元素时切换一个类。我需要单击的元素来接收类，以及列表中的任何其他项目来释放类。我已经研究了一些关于 SO 的假设解决方案，但是在实施它们时，它们不能正常工作，我什至不明白为什么它们会。

建议的一般解决方案是为ng-repeat 列表中的项目的索引设置一个变量。然后使用ng-class 添加类。 JSFiddlehere.

<div ng-app>
<p ng-repeat="item in ['a', 'b', 'c']"
    ng-click="selectedIndex = $index"
    ng-class="{selected: $index === selectedIndex}"    
>{{item}}</p>
</div>

问题是'selected' 类永远不会从先前的元素中删除。因此，单击一个元素会按预期将类添加到元素中，但单击另一个元素不会从先前单击的元素中删除该类。我猜是因为 Angular not 在每次点击时重新渲染整个列表，因此旧的点击元素不会改变。但这引出了我的问题，为什么这是一个压倒性的解决方案？我只是执行错误吗？谢谢。

Answer 1

这是因为 ng-repeat 创建了自己的子范围，因此您的其他元素每个都有自己的 selectedIndex 实例 - 创建一个函数，以便所有重复元素都能看到 selectedIndex：

控制器：

$scope.setSelected = function(index) {
    $scope.selectedIndex = index;
}

<div ng-app>
    <p ng-repeat="item in ['a', 'b', 'c']"
        ng-click="setSelected($index)"
        ng-class="{selected: $index === selectedIndex}"    
    >{{item}}</p>
</div>