Question

我有一个图标列表，其中包含＆＃34; on＆＃34;或者＆＃34;关闭＆＃34;取决于$ scope中的布尔值。我创建了两个CSS类 - clrOn和clrOff - 它们只是不同的颜色。我正在使用class =＆＃34;＆＃34;分配所有图标clrOff。然后尝试用ng-class =＆＃34;＆＃34;来覆盖它如果布尔值为真。

根据我的研究，这是我应该工作的。 plunker

CSS FILE：

.clrOn { color: #333333; }
.clrOff { color: #DDDDDD; }

JS文件：

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

app.controller('MainCtrl', function($scope) {
  $scope.attachments = 1;
});

HTML：

<body ng-controller="MainCtrl">
    <span class="clrOff" 
          tooltip="Attachments" 
          ng-class="{ 'clrOn' : app.attachments }">
          TEST
    </span>
  </body>

Answer 1

首先，ng-class="{ 'clrOn' : app.attachments }"没有获取附件变量，因为它直接在作用域上声明，而不是在scope.app上声明，因此将其更改为ng-class="{ 'clrOn' : attachments }"。

其次，ng-class不会覆盖任何现有的class属性，但会添加它们，因此您的跨度将保留两个类都应用于它。如果您不想同时分配这两个课程，则需要使用ng-class声明这两个课程。

ng-class不按预期覆盖类

1 个答案: