Angular中ng-class混合字符串与log.level大写转换的实现疑问

嘿，很高兴你已经自己理清问题啦！不过还是把这个场景的解决思路整理出来，给其他遇到同样问题的小伙伴做个参考：

问题回顾 #

你最初的尝试遇到了两种情况：

• 用了插值语法的写法：<td ng-class="'log-level-' + {{log.level | uppercase}}">，结果渲染后变成了 <td ng-class="'log-level-' + WARN" class="log-level-">，显然class后缀没有正确生成；
• 去掉双括号后的写法：<td ng-class="'log-level-' + log.level">，渲染结果是 <td ng-class="'log-level-' + log.level" class="log-level-Warn">，虽然class能绑定，但属性值是首字母大写的Warn，而你想要全大写的形式。

正确解决方案 #

在ng-class的表达式里直接使用Angular的uppercase过滤器，不需要额外的插值双括号，写法如下：

<td ng-class="'log-level-' + (log.level | uppercase)">

为什么这样可行？ #

Angular的指令属性（比如ng-class）本身就支持直接解析表达式，所以过滤器可以直接嵌套在表达式中使用。你第一次尝试的双括号插值会破坏表达式的结构，导致Angular提前解析了log.level | uppercase，把它替换成了WARN字符串，但没有正确整合到ng-class的绑定逻辑里；而去掉括号后加上过滤器，就能让Angular在解析表达式时，先把log.level转为全大写，再和前缀字符串拼接，最终生成正确的class="log-level-WARN"。

内容的提问来源于stack exchange，提问作者Peter Boomsma