0

I have to track down a bug related to work of ng-class (sometimes it adds new value without removing old). So I need a quick reference to see it's current value. Is there any short (or not) way to bind that to the content? I mean something like this:

<div ng-class="something">
    {{ngClassValueDisplayedHere}}
</div>
3
  • {{something}}? The problem surely doesn't come from ngClass, by the way. Commented Jun 16, 2015 at 13:12
  • well, by 'something' I mean some expression that is provided there. Really, not the point. Commented Jun 16, 2015 at 13:16
  • If the ng-class is bound to a $scope variable then just display the same value. Like {{something}} Commented Jun 16, 2015 at 13:18

3 Answers 3

2

I had exactly the same problem with ng-class not removing old value. After days of investigation it turned out that it was ngAnimate who was messing with class changes. removing it from angular module dependencies solved the problem (Angular 1.3).

Sign up to request clarification or add additional context in comments.

Comments

0

ng-class can bind to many different things. From the documentation:

Expression to eval. The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values. In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.

So in your example, just display whatever your something is. It's supposed to be an angular expression, which can be evaluated like any other with double-curlies. This will help you debug your ng-class

<div ng-class="something">
    {{something}}
</div>

Demo

3 Comments

Yeah, this should just work. Not sure what other problems you might be having. Using the map-object (with class names keyed to booleans) might help break the ng-class logic into manageable pieces.
Really this is supposed to work. And it is in most cases. But sometimes I notice, that {{something}} is displayed as expected, while the value of resulting "class" attribute contains different data - as described, the new value does not replace old, but is added to it. Such happens, when the browser tab (where page is opened) is not active and changes are performed rapidly. Really weird..
My only suggestion is to include those details in a new question. You can always provide a link to this question for context/proof of your debugging. If you can provide a specific example or even a demo, it would really help your new question.
0

In case someone else stumbles upon this problem like I did just recently with angular version 1.5.8: https://github.com/angular/angular.js/issues/14582

P.S. Update to 1.5.11 solved the issue related to ngAnimate, prior versions still had the same issue.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.