steve k steve k - 1 month ago 7
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'

Answer

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.

Comments