Question

任何人都可以为这个JSFiddle提供正确的方法：

<style>
 .red #btn{
     background-color:red;
  }

 .blue #btn{
    background-color:blue;
  }
 </style>

 <body ng-app="ap" ng-controller="con">
    <button id="btn" ng-click="changeClass()">Change Class</button>    
 </body>

 <script>
  var app = angular.module("ap",[]);

  app.controller("con",function($scope){

  $scope.class = "red";

  $scope.changeClass = function(){
     if ($scope.class === "red #btn")
         $scope.class = "blue #btn";
      else
         $scope.class = "red #btn";
   };
 });

 </script>

JsFiddle Link

我试图通过.class＆amp;更改元素的类。 #ID。

提前致谢

感谢tymeJV，新的JSFiddle：

Solution

Answer 1

正确的方法是根据切换变量使用ng-class，请考虑：

CSS：

.red {
    color: red;
}

JS：

$scope.toggle = false;

HTML：

<button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>

ng-class的工作原理是根据变量（“切换”）是true还是false来指定引用的类（在上面，“红色”）。

AngularJs切换ng-class ng-click

1 个答案: