ng-class if else not working with repeat value

Question

I been trying to change a class if a tab in a repeat, depending in the title of the tab. snippet shown below

 <tab ng-repeat="tab in tabs" heading="{{tab.title}}" ng-class="{{tab.title}} === 'Logs' ? 'pull-right' : ''" active="tab.active">
            <div class="col-md-12">
                <div ng-include="tab.content">
                </div>
            </div>
        </tab>

But it's not working. I tried changing the tab.title to $index.

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" ng-class="{{$index}} === 1 ? 'pull-right' : ''">
            <div class="col-md-12">
                <div ng-include="tab.content">
                </div>
            </div>
        </tab>

try with and without surrounding it with {} and {{}}. but still. nothing works.

Can anyone tell me what i'm doing wrong here?

as always, thanks for your time.

----EDIT---------

well i found a post where there was a workaround. don't know what happen. but it works. snippet shown below

              <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" class="{{ tab.title == 'Logs' ? 'pull-right':'' }} ">
            <div class=" col-md-12">
            <div ng-include="tab.content">
            </div>

as i describe. i have tried it with and without. but nothing changes. — DaCh
– DaCh, Commented Sep 15, 2015 at 14:45
Arh sry. forgot i was using it. no. it's angular-ui bootstrap lib. — DaCh
– DaCh, Commented Sep 15, 2015 at 14:54
You should've started with it, actually. It looks like there's no way to apply your own ng-class to tab directive (among others from that package). Check this issue for details - and possible workaround, involving using a custom function. — raina77ow
– raina77ow, Commented Sep 15, 2015 at 15:07
It works, because class (native attribute) is supplied with an Angular expression. ) You can post this as an answer, but I'd suggest changing your question a bit - it's actually angular.ui/bootstrap specific. — raina77ow
– raina77ow, Commented Sep 15, 2015 at 15:25

Mike Vranckx · Accepted Answer · 2015-09-15 14:59:43Z

2

You should use this syntax for the ng-class. First the class name you want to set, second the condition to check for. Once it matches the condition, the class name will be added.

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" ng-class="{ 'pull-right': tab.title == 'Logs' }" active="tab.active">
    <div class="col-md-12">
        <div ng-include="tab.content">
        </div>
    </div>
</tab>

edited Sep 15, 2015 at 14:59

answered Sep 15, 2015 at 14:50

Mike Vranckx

5,5973 gold badges27 silver badges28 bronze badges

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

5 Comments

DaCh Over a year ago

when i use it as you said. i get a error - Syntax Error: Token '{' is an unexpected token at column 40 of the expression [{ 'pull-right': tab.title === 'Logs' }

Mike Vranckx Over a year ago

Can you try using == (2 equals) instead of ´===` (3 equals)?

DaCh Over a year ago

Nope. same thing happens

Mike Vranckx Over a year ago

That is strange ... do you have same error when doing ng-class="{ 'pull-right': true }" ?

raina77ow Over a year ago

@MikeVranckx You're correct in general case, but that's not the one - it's tab directive, having its own quirks. Basically, the value specified in ng-class is concatenated to tab own ng-class definition; that's why string syntax just doesn't work without any errors in console, and object syntax throws an error.

raina77ow · Accepted Answer · 2015-09-16 11:45:56Z

As said in the docs, value of ng-class is an expression that can be evaluated to a string, an object, or an array. That means you don't have to use {{}} there: simple...

ng-class="tab.title === 'Logs' ? 'pull-right' : ''"

... should suffice. In fact, it's cleaner to write it as an object:

ng-class="{'pull-right':tab.title === 'Logs'}"

Sadly, that won't solve your case, as you're trying to apply ng-class to a custom directive (created with angular-ui Bootstrap package). That directive uses ng-class in its own template:

<li ng-class="{active: active, disabled: disabled}">
  <a href ng-click="select()" tab-heading-transclude>{{heading}}</a>
</li>

... and it's created with replace flag set to true. This effectively means value of ng-class supplied by you will be glued together with value supplied by template, resulting in something ugly like:

<li ng-class="tab.title === 'Logs' ? 'pull-right' : '' {active: active, disabled: disabled}">

That certainly won't work as planned. In fact, there's a related issue (#1741) registered at the project's hub - which is closed with the following commentary:

Using ng-class on a directive that uses replace: true is a very bad idea. There are numerous issues around replace: true and even talk of deprecating/removing it. But, unfortunately, it's not going anywhere soon and the caveat released by the core Angular team was that use it, but do so at your peril. I.e., use it knowing that doing so incorrectly can break your DOM.

I suspect this issue will not be addressed.

One possible workaround is using native class with an Angular expression supplied as its value:

class="{{tab.title === 'Logs' ? 'pull-right' : ''}}"

This won't be merged with a <tab> template class, as there's no such thing there - and you're clear to go!

Collectives™ on Stack Overflow

ng-class if else not working with repeat value

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related