html - 如何在 angular.js 中应用 css

Question

我有这样的html

 <div ng-controller="newcontroller">
     <div class="firstdiv"  ng-show="show">welcome</div>
      <button ng-click="newfunction">click</button>
 </div>

像这样的js文件

  app.controller('newcontroller',function($scope)
  {
         $scope.show=false
         $scope.newfunction=function()
         {
                $scope.show=true;

         }

  });

我有这样的CSS CSS

.firstdiv { 背景:绿色；

.newclass{背景:黑色;}

我在此处执行此操作，当我单击“单击”按钮时，我会显示欢迎消息。我想为该 div 动态更改 css。所以我有另一个名为 newclass 的 css 类名称。所以当我单击单击按钮时，我必须应用该新类来更改 css ....该怎么做？

Answer 1

使用带有表达式的ng-class来检查作用域变量

这里的示例不需要范围内的任何函数来实现您想要的。

<div ng-class="{newclass : toggle,firstdiv: !toggle} ">welcome</div>
<button ng-click="toggle=!toggle">click</button>

在范围内:

$scope.toggle=false;

使用这种方法你不需要编写方法来改变你的元素，它们可以通过简单地检查范围内变量的状态来改变

DEMO