AngularJs 切换 ng-class ng-click

Question

AngularJs 切换 ng-class ng-click

10

有人能提供正确的方法来处理这个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 链接

我正试图通过 .class 和 #ID 来改变元素的类。

提前致谢。

感谢 tymeJV，这是新的 JSFiddle:

解决方案

- Mike Jones

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tymeJV · Accepted Answer

正确的方法是根据一个开关变量使用 ng-class，例如：

CSS：

.red {
    color: red;
}

JS：

$scope.toggle = false;

HTML:

HTML：

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

ng-class 根据条件变量（在上面的例子中为 "toggle"）是 true 还是 false，来分配引用样式类（这里是 "red"）。