如何有条件地在 ng 样式中应用动态值？

Question

当颜色值可以从 $scope 更新时， 我想有条件地应用 background-color 和 ng-style 。

这是我的范围内的变量：

 $scope.someone = { id: '1', name: 'John', color: '#42a1cd' };
$scope.mainId = 1;

实际上我没有使用任何条件来应用背景颜色，它是通过以下方式完成的：

 <div ng-style="{'background-color': someone.color}">
    {{someone.name}}
</div>

---

这里的想法是 仅在 someone.id == mainId 时 应用此背景色。我尝试了几种解决方案，但它似乎不是正确的语法：

• ng-style="{{someone.id == mainId}} ? ('background-color': {{someone.color}}) : null"
• ng-style="{ ('background-color': someone.color) : someone.id == mainId }"

---

用于测试的 JSFiddle

有人知道我如何实现这一目标吗？

原文由 Mistalis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这似乎工作正常。

 ng-style="{'background-color': person.id === mainId ? person.color : ''}"

查看更新后的两个人的小提琴 - 一个 mainId 有背景颜色，而另一个没有：http: //jsfiddle.net/fgc21e86/7/

原文由 Fissio 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以这样做

ng-style="someone.id == mainId ? {'background-color':'{{someone.color}}'} : {'background-color':'red'}"

这是一个更新的小提琴 http://jsfiddle.net/fgc21e86/9/

原文由 strwoc 发布，翻译遵循 CC BY-SA 3.0 许可协议