How to apply multiple styles based on multiple conditions in ng-style directive?

Viewed 7427

In angular, I need to apply different style attributes based on different conditions but its not working this way and I only can apply 2 conditions with conditional expression.

<div ng-style="
    (status=="up")  ?{'background-color':'green' ,'color':'green'}
    (status=="down")?{'background-color':'red'   ,'color':'red'}
    (status=="idle")?{'background-color':'yellow','color':'yellow'}
    (status=="")    ?{'background-color':'grey'  ,'color':'grey'}
">

It would be better if you know any way to pass attribute to a function that returns style obj for ng-style like bellow which is weirdly not working!

$scope.styleFn(status,attr) {
        (status=="up")  ?{attr:'green'}
        (status=="down")?{attr:'red'}
        (status=="idle")?{attr:'yellow'}
        (status=="")    ?{attr:'grey'}
}

<div ng-style="styleFn('up','background-color')">
2 Answers
Related