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类将被删除。

Answer 2

试试这个。

var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope) {
  $scope.myObj = {
    "color" : "blue"}
$scope.change=function()
{
  $scope.myObj.color == 'red' ? $scope.myObj.color = 'blue' : $scope.myObj.color = 'red';
 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl"><h1 ng-style="myObj" ng-click="change()">Welcome</h1>
</div>

根据ng-click切换CSS样式

2 个答案: