javascript - 如何仅针对单击的元素在 Angular 中的 3 个或更多类之间交换？

Question

我想要一个元素在单击它时在 3 个 css 类之间交换。我已经看到其他解决方案在仅切换 2 个类时有效 like this one .这些基于 true 和 false 条件，因此它不适用于超过 2 个类。

我让它在 3 个类之间交换，但是，点击目标是所有元素而不是被点击的单个元素。 <强> Here's my code so far :`

$scope.iconClass = "green";

$scope.iconClicked = function () {
    switch ($scope.iconClass) {
        case "green":
            $scope.iconClass = "red";
            break;
        case "red":
            $scope.iconClass = "blue";
            break;
        default:
            $scope.iconClass = "green";
    }
};`

html 在这里:`

<li class="item" ng-class="iconClass" ng-click="iconClicked()"> Item 1 <br> </li> 
<li class="item" ng-class="iconClass" ng-click="iconClicked()"> Item 2 <br> </li>
<li class="item" ng-class="iconClass" ng-click="iconClicked()"> Item 3 <br> </li>

`

如何不必为每个不同的元素创建不同的 iconClass 变量？我相信有一个简单、优雅的解决方案。

Answer 1

ng-class支持基于涉及范围变量的逻辑表达式添加多个类。

class="ng-class: expression;"

Expression to eval. The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values.

您可以通过 ng-class="{'red':'iconclass == red', 'blue':'iconClass == blue'}" 实现此目的

您可以使用 SWAP 按钮更改颜色，这正是您要找的。

示例可以在这里找到:http://plnkr.co/edit/lzHkZaBn1RQv24LaxQYT?p=preview