AngularJS - 有条件ngStyle

Question

是否有可能做这样的事情：

<span data-ng-style="vm.myFlag == true ? 'background-color:{{myObject.color}};padding:2px;border-radius:2px;' : ''"> 

这如果 - 否则不起作用。 ngClass不起作用，因为颜色是我的对象的属性。

Answer 1

<span data-ng-style="vm.myFlag && {'background-color':myObject.color}"> 

Answer 2

https://docs.angularjs.org/api/ng/directive/ngStyle

的NG-风格基本示例：

<span ng-style="{'background-color':'blue'}">Sample Text</span> 

加三元运算符有条件的造型在此预期：

<span data-ng-style="(vm.myFlag == true) ? {'background-color': myObject.color, 'padding': '2px', 'border-radius': '2px'} : {}"> 

Answer 3

你可以这样做：

<span data-ng-style="vm.geMyStyle()"> 

和控制器：

vm.getMyStyle= func(){ 

    let style = vm.myFlag == true ? 'background-color:' 
    +myObject.color+';padding:2px;border-radius:2px;' : ''; 

    return style; 
} 

，但你也应该检查是否存在颜色特性集。