AngularJs 切换 ng-class ng-click

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

JsFiddle Link

我正在尝试通过 .class & #ID 更改元素的类。

提前致谢

感谢 tymeJV,新的 JSFiddle:

Solution

最佳答案

正确的方法是使用 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通过根据变量(“toggle”)是否为 true 分配引用的类(在上面,“红色”)来工作或 false .

关于AngularJs 切换 ng-class ng-click,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22071984/

相关文章:

javascript - Angular 自定义多选列表

javascript - 无法绑定(bind)到 'ngModule',因为它不是 'input' 的已知属性。在 Angular 2 asp.net 核心

javascript - 将隐藏的输入绑定(bind)到 Angular 模型

angularjs - 如何在交互测试 Protractor 时提供 "rootelement"选项

javascript - Angular - 指令和使用模块

javascript - $log.debug 中的条件运算符

javascript - 迷失在现有的 JS 项目中

angularjs - Angular.js : How does $eval work and why is it different from vanilla eval?

angularjs - AngularJS 中是否提供自动依赖注入(inject)?

angularjs - 与 $location.search() : how to remove a parameter from the url when it's null