All geek questions in one place

Ng class does not override class as expected

I have a list of icons that are either "on" or "off" depending on the logical values โ€‹โ€‹in the $ area. I created two CSS classes - clrOn and clrOff - and these are just different colors. I assign all the clrOff icons with class = "and then try to override this with ng-class =" "if the boolean value is true.

Based on my research, this is what I have, which should work. plunker

CSS FILE:

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

JS FILE:

 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>
+6
source share
1 answer

Firstly, ng-class="{ 'clrOn' : app.attachments }" does not pick up the attachment variable, because it is declared directly in the scope, and not in scope.app, so change it to ng-class="{ 'clrOn' : attachments }" .

Secondly, ng-class will not override any existing class attributes, but add to them so that your range remains so that both classes are applied to it. If you do not want to assign both classes, you need to declare them as using ng-class .

+5
source

Source: https://habr.com/ru/post/973099/

More articles:


All Articles