使用ng-class条件设置Bootstrap列类时的语法错误及疑问

首先，咱们来拆解你遇到的两个问题：

一、语法错误的原因及修复 #

你写的代码里有三处语法问题导致了$parse:syntax错误：

1. 带连字符的类名未加引号：Angular的表达式解析器会把col-sm-9里的连字符当成减号，误将它解析成减法表达式（比如col - sm -9），这显然不是你要的效果。所以带特殊字符（连字符、空格等）的类名必须用引号包裹起来。
2. ng-class的对象闭合错误：你在flag后面少写了一个闭合的}，而且引号的位置也错了，导致对象结构不完整。
3. class属性多了一个多余的}：你把}写到了class属性的末尾，这属于语法错误。

修复后的正确代码应该是这样的：

<div ng-class="{'col-sm-9': !flag, 'col-sm-5': flag}" class="col-sm-offset-3"></div>

这里用单引号把带连字符的类名括起来，同时修正了括号和引号的位置，class属性也恢复正常。

二、固定添加col-sm-offset-3类是否可行？ #

完全没问题！class属性里的类是始终生效的，而ng-class是动态根据表达式添加/移除类，两者可以完美共存。不管flag是true还是false，col-sm-offset-3都会被应用到这个div上，和动态添加的col-sm-9或col-sm-5不会有冲突，Bootstrap的栅格类也能正常工作。

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