javascript - 基于 ng-click 切换 CSS 样式

Question

我需要根据 ng-click 事件切换 CSS 样式。

用户第一次单击 ng-click 元素时，样式将被应用，第二次单击 ng-click 元素时，CSS 未按预期更改切换。

在下面找到工作代码，

HTML:

<h1 ng-style="myObj" ng-click="change()">Welcome</h1>

JavaScript:

app.controller("myCtrl", function ($scope) {
    $scope.myObj = {
        "color": "white"
    }
    $scope.change = function () {
        $scope.myObj = {
            "color": "red"
        }
    }
});

我需要根据 ng-click 切换 CSS 类。

谁能指导我如何存档。

Answer 1

您可以使用 ng-class带有将在点击时还原的标志。

/* Default class */
h1 {
  color: blue;
}
.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h1 ng-app ng-class="{'red': flag}" ng-click="flag=!flag">Welcome</h1>

默认情况下，flag 将是undefined，因此是假的，因此不会应用该类。单击时，flag = !flag 会将标志设置为 true 并且将应用 red 类。下次单击时，flag 将设置为 false 并且 red 类将被删除。