使用{...} []表单时如何在ngClass中链接表达式

Question

如何向使用此表单的ng-class指令添加另一个表达式：

ng-class="{true:'loading', false:'loading-done'}[data.loader===null]"

我想在列表中添加这样的内容：

{highlight:isSpecial}

是否可以不扩展第一个表达式？

感谢。

Answer 1

您目前正在使用ngClass（see the documentation）和“表示空格分隔的类名的字符串”。要添加另一个类，请使用空格将其与另一个类分开：

<div ng-class="{true:'loading', false:'loading-done'}[data.loader===null] + (isSpecial ? ' highlight' : '')" />

但你为什么要用这种丑陋的形式？一个更易读的解决方案就是使用“类名映射到布尔值”：

<div ng-class="{loading: data.loader === null, loading-done: data.loader !== null, highlight: isSpecial}" />