删除 angularjs 中的类类似逻辑

removeClass alike logic in angularjs

本文关键字：angularjs 删除      更新时间：2023-09-26
.. ng-repeat
<li ng-class="{'active':selIndex==$index}">
<span ng-click="selIndex=$index">click</span>
</li>

上述代码的问题是，在将活动类添加到单击的类之前，它不会重置所有 li 的类。如何在 angluarjs 中应用 removeClass 逻辑？

您不会主动删除 Angular 中的类。你告诉 Angular 在什么情况下哪个类必须处于活动状态，它会弄清楚的。你和ng-class一起做，就像你做的那样。如果条件是true，则类将出现在元素上，否则不会。每当任何状态发生变化时，Angular 都会重新计算所有元素的所有类。一旦条件变得false，Angular 就会删除类。

更有可能的是，您的逻辑在某处不起作用。我不会将$index用于任何事情，因为任何一个项目的索引都可能随时更改。而是使用数据本身：

$scope.items = [{ id: 1 }, { id: 2 }];
$scope.activeItem = null;
$scope.selectItem = function (item) {
    $scope.activeItem = item;
}

<li ng-repeat="item in items" ng-class="{ active: item.id == activeItem.id }">
    <span ng-click="selectItem(item)">

在ng-click指令中使用直接赋值在范围方面可能会变得棘手;在控制器上使用函数通常没有任何问题。

这可能与为每个迭代创建一个子范围的 ng-repeat 有关。

您应该尝试以下操作：

<li ng-class="{'active':$parent.selIndex==$index}">
    <span ng-click="$parent.selIndex=$index">click</span>
</li>

如果你嵌套了ng-repeat，调试起来会变得很麻烦。我建议您使用控制器作为语法：https://stackoverflow.com/a/21292408/1251861

相关文章：