0

我有这样的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

.firstdiv { 背景：绿色；}

.newclass {背景：黑色；}

在这里，当我单击单击按钮时，我正在这样做，我正在显示欢迎消息。我想为该div动态更改css。所以我有另一个名为 newclass 的 css 类名称。所以当我单击单击按钮时，我必须应用该新类来更改 css ....如何做到这一点？

4

3 回答 3

1

使用ng-classwith 表达式检查范围变量

这是不需要范围内的任何功能来实现您想要的示例的示例。

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

在适用范围：

$scope.toggle=false;

使用这种方法，您无需编写方法来更改元素，只需检查范围内变量的状态即可更改它们

DEMO

于 2013-10-31T13:20:56.860 回答
0

尝试这个：

索引.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>

脚本.js

'use strict';

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

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

    $scope.myclass = 'firstdiv';

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

  }
]);

样式.css

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

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

于 2013-10-31T11:21:34.817 回答
0

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

看看这里

于 2013-10-31T11:20:51.540 回答