Question

我使用ng-class通过单击“按钮”添加和删除类，是不是不起作用？我使用Angular1。

是什么原因？

<html lang="en" ng-app="xxx">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        div {
            width: 500px;
            height: 500px;
            background-color: black;
        }
         div.red {
            background-color: red;
            }

        button   {
            width: 200px;
            height: 50px;
            background-color: gold;
        }
    </style>

</head>
<body ng-controller="ooo">
<script src="angular.js"></script>

<div ng-class="{red:isRed}" >xxxx</div>

<button ng-click="changColorIsRed()">O</button>

</body>
<script>
  var app = angular.module('xxx',[]);
    app.controller('ooo',['$scope',function ($scope) {
        $scope.isRed = false;
        $scope.changeColor = function () {
            $scope.isRed = !$scope.isRed;
        }
    }]);
</script>
</html>

还有其他方法可以实现吗？

Answer 1

您的代码中有错误。

您定义了函数changeColor，但在changColorIsRed属性中使用了ng-click。

如果您将此更改为ng-click="changeColor()"，则您的代码将有效。

Answer 2

更改

<button ng-click="changColorIsRed()">O</button>

要

<button ng-click="changColor()">O</button>

Answer 3

您的代码中有多个错误：

除了以下变化：

<button ng-click="changColorIsRed()">O</button>

要

<button ng-click="changColor()">O</button>

您不能使用Angular的指令然后加载angular.js文件。您必须设置以下代码：

<script src="angular.js"></script>

位于ng-app之上。

如何使用`ng-class`添加和删除类？

3 个答案: