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 .so的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

Answer 2

我认为您应该在CSS中描述按钮的所有状态。然后无需实时更改任何内容。

看看here

Answer 3

试试这个：

的index.html

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-app="myApp">
    <div ng-controller="newcontroller">
      <div ng-class="[myclass]">welcome</div>
      <button ng-click="newfunction()">click</button>
    </div>

    <script data-require="angular.js@1.0.8" data-semver="1.0.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>    
    <script src="script.js"></script>    
  </body>

</html>

的script.js

'use strict';

var app = angular.module('myApp', []);

app.controller('newcontroller', ['$scope',
  function($scope) {

    $scope.myclass = 'firstdiv';

    $scope.newfunction = function() {
      $scope.myclass = 'newclass';
    };

  }
]);

的style.css

.firstdiv { background: green; }
.newclass { background: yellow; }

工作示例： http://plnkr.co/edit/oCZGOM?p=preview

如何在angular.js中应用css

3 个答案: