Using ng-style to edit the attribute of one class on a multi-class div AngularJS

Question

This is AngularJS 1.5 (not 2)

I have a <div> tag that has a default classes and a class that is only applied on a variable value. I'm using ng-class to toggle the latter class mentioned.

Based on the same variable value, I'd like to toggle one of the attributes in the default class. I'm using ng-style to try and toggle this.

How do I know, or can I set, which class the ng-style interacts with? Or is there a different/better way to do this? I would like to keep the logic inline in the HTML, and not resort to editing classes in the Controller.

My HTML:

<div class="default-class" 
     ng-style="{flex-direction: Controller.isMobile() ? 'column-reverse' : 'row'}"
     ng-class="{'sometimes-class': !Controller.isMobile()}">
    ...
</div>

CSS:

.default-class{
    display: flex;
    flex-direction: row; /*A default value that I expect to toggle*/
} 
.sometimes-class{
    ...
}

I am trying to edit the flex-direction value found in the default-class.

score 1 · Answer 1 · answered Nov 27 '17 at 18:17

1

Just remove flex-direction from default class.

.default-class{
    display: flex;
}

answered Nov 27 '17 at 18:17

Syedur

414
4
10

This does not work. The flex-direction still does not toggle based on Controller.isMobile(). – user2465164 Nov 27 '17 at 18:24

score 0 · Answer 2 · answered Nov 27 '17 at 19:12

I believe you can't used that operator on ng-style but don't quote me on that, anyway, you can use this instead:

ng-style="Controller.isMobile() && {'flex-direction':'column-reverse'} || {'flex-direction': 'row'}"

That should do the trick, I made a js fiddle with a simple boolean and text color to illustrate:

http://jsfiddle.net/Itsca/ADukg/16270/

Also you can check this question: Angular ng-style with a conditional expression

Hope it helps.

score 0 · Answer 3 · answered Nov 27 '17 at 19:54

According to this Stack Overflow question, my syntax is correct for Angular 1.1.5+.

While I'm still not sure if it's possible to toggle a CSS attribute with ng-show when there's other classes within the same scope, I was able to solve my problem with using media queries in the CSS.

In my problem, I was specifically looking to toggle when the setup was run in mobile resolution (Controller.isMobile()). Therefore, I just applied the attribute directly.

(Example in Sass)

.default-class{
    display: inline-flex;
    flex-direction: row;

    @include respond-to(mobile) {
        flex-direction: column-reverse;
    }
}

In my case specifically, the Controller.isMobile() is actually a simplification, where the code in question is passed through the controller via an injected factory, whose job is to determine screen resolution. In this case, this factory is not something I have access to. Could it be the case that this injection is stopping ng-show from toggling appropriately? (This injected method is used throughout the HTML seemingly successfully, however, albeit without ng-show.)

My specific problem has been resolved with media queries in CSS, but the overall question of using ng-show with multiple classes on a single div still stands.

Using ng-style to edit the attribute of one class on a multi-class div AngularJS

3 Answers3