Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/cocoa/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
AngularJs切换ng类ng单击_Angularjs - Fatal编程技术网
Fatal编程技术网

AngularJs切换ng类ng单击

angularjs

AngularJs切换ng类ng单击,angularjs,Angularjs,有人能提供正确的方法来解决这个问题吗 <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&l

有人能提供正确的方法来解决这个问题吗

<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>


.红色#btn{
背景色：红色；
}
.蓝色#btn{
背景颜色：蓝色；
}
换班
var-app=angular.module（“ap”，[]）；
应用控制器（“con”，功能（$scope）{
$scope.class=“红色”；
$scope.changeClass=函数（）{
如果（$scope.class==“红色#btn”）
$scope.class=“蓝色#btn”；
其他的
$scope.class=“红色#btn”；
};
});

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

提前谢谢

谢谢tymeJV，新的JSFIDLE:

正确的方法是使用基于切换变量的
ng类
，考虑：

CSS:

JS:

HTML:

更改类

ng class
的工作原理是根据变量（“切换”）是否为
true
或
false

tymeJV:Question来分配引用的类（在上面的“红色”）。如果我有一个，我想通过点击按钮来改变它的颜色怎么办？把
ng类
放在这个元素上。梅杰：我知道我在这里运气不好，呵呵，但是如何在红色和蓝色之间切换？啊，我不太清楚上面的语法，但是你可以用
ng cass
-尝试搜索
ng类如果还有其他的
@tymeJV之前有人告诉过你吗？你是天才：）工作得很有魅力！！

.red {
    color: red;
}



$scope.toggle = false;



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