AngularJs切换ng-class ng-click

Mik*_*nes 6 angularjs

任何人都可以为这个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>
Run Code Online (Sandbox Code Playgroud)

JsFiddle链接

我试图通过.class和#ID更改元素的类.

提前致谢

谢谢tymeJV,新JSFiddle:

tym*_*eJV 26

正确的方法是ng-class基于切换变量使用,考虑:

CSS:

.red {
    color: red;
}
Run Code Online (Sandbox Code Playgroud)

JS:

$scope.toggle = false;
Run Code Online (Sandbox Code Playgroud)

HTML:

<button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>
Run Code Online (Sandbox Code Playgroud)

ng-class根据变量("toggle")是否为true或,分配引用的类(在上面,"红色")false.

  • tymeJV:我知道我在这里推着我的运气,呵呵,但是如何在红色和蓝色之间切换? (2认同)
  • 啊,我不确定我的头脑中的语法,但你可以用`ng-cass`来做 - 尝试搜索`ng-class if else` (2认同)