AngularJS - 条件ngStyle

Question

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

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

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

Answer 1

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

ng-style的基本示例：

<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 2

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

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;
}

但你也应该检查是否有颜色属性设置。