steve k steve k - 8 months ago 57
AngularJS Question

Using multiple ternaries in ng-style

I am wondering how you could have/ if you should have multiple ternaries within the html

I am trying to change font size if a property exists to true. In this case the condition isJP works just fine.

ng-style="isJP() ? {'font-size':'8125em'} : {'font-size':'16px'}">

If I want to also consider languagePath === 'en' I am not so fortunate on this.

isJP() ? languagePath ==='en'? {'font-size':'.8125em'} : {'font-size':'16px'}

This last effort made no sense to create 2 next to each other, but I tried to see what would happen.

isJP() ? {'font-size':'.8125em'} : {'font-size':'16px'}, languagePath === 'eng'? {'font-size':'.8125em'} : {'font-size':'16px'}">

Wondering what is the best approach in this matter. I definitely want to add change the font size on both isJP() and languagePath ==='en'


It sounds like you want this:

"(isJP() || languagePath === 'en') ? {'font-size': '8.125em'} : {'font-size': '16px'}"

Another option would be to define a function in your angular code that checks both conditions, like

useRelativeFont = function () { return (isJP() || languagePath === 'en') }

...and then use useRelativeFont() in your ng-style ternary.