When working in Angular, I am attempting to apply different style attributes based on varying conditions. However, the typical conditional expression method is limited to just two conditions and is not providing the desired results.
<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 more convenient if there was a way to pass attributes to a function that returns a style object for ng-style, like the following example which strangely is not functioning correctly!
$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')">