javascript - 如何根据 ng-style 指令中的多个条件应用多个样式？

Question

在 Angular 中，我需要根据不同的条件应用不同的样式属性，但它不是这样工作的，我只能用条件表达式应用 2 个条件。

<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'}
">

如果你知道任何方法将属性传递给一个函数，该函数返回 ng 样式的样式 obj，就像下面这样奇怪的不起作用，那就更好了!

$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')">

Answer 1

是的，您可以使用函数来指定更复杂的条件。

var style = {
  'up': {'background-color':'green' ,'color':'green'},
  'down': {'background-color':'red' ,'color':'red'},
  'idle': {'background-color':'yellow' ,'color':'yellow'},
  'default': {'background-color':'grey'  ,'color':'grey'}
}

$scope.applyStyle = function(status) {
    //the status is the key to get the target style
    return status ? style[status] : style['default']; 
)};

然后是模板

<div ng-style="applyStyle(status)"></div>