我发现当我已经把一个类应用于整个表格时（例如，对奇数行应用颜色 ），在表格元素内部应用类时出现问题。似乎当你用 Developer 工具 检查元素时，element.style没有被分配样式。所以我尝试使用 ng-style 而不是使用 ng-class，在这种情况下，新的 CSS 属性会出现在 element.style 内。下面这段代码非常适合我：

    [...amazing code...]
    {{ myvar }}
    [...more amazing code...]

Myvar 是我评估的变量，每次根据 Myvar 的值对每个

更新

如果您想为表格应用一个类(例如，当访问一个页面时或其他情况下)，可以使用以下结构：

基本上，我们所需要激活 ng-class 的是应用的类和一个 true 或 false 语句。 true 应用类，false 不应用类。在这里，我们有两个页面路由检查和它们之间的 OR，因此，如果我们在 /route_a 或者我们在 /route_b 中，就会应用 active 类。

这仅需在右侧具有返回 true 或 false 的逻辑函数即可工作。

所以在第一个示例中，ng-style受到三个语句的限制。如果它们全部都是 false，那么没有样式会被应用，但是根据我们的逻辑，至少会有一个会被应用，因此，逻辑表达式将检查哪个变量比较为 true，并且因为非空数组总是 true，这将留下一个数组返回，仅有一个 true，考虑到我们使用 OR 作为整个响应，所以剩余的样式将被应用。

顺便说一下，我忘了给你 isActive()函数：

$rootScope.isActive = function(viewLocation) {
    return viewLocation === $location.path();
};

最新更新

这里有一些我发现真正有用的东西。当您需要根据变量的值应用类时，例如，根据 div 的内容应用图标时，可以使用以下代码（在使用 ng-repeat 时非常有用）：

来自 Font Awesome的图标

Angular提供了许多内置指令，用于有条件或动态地操作CSS样式：

• ng-class - 当CSS样式集是静态的/预先已知时使用
• ng-style - 当你不能定义CSS类，因为样式值可能会动态更改时使用。一种可编程的控制样式值的方式。
• ng-show 与 ng-hide - 如果你只需要显示或隐藏某些内容（修改CSS），则使用
• ng-if - 版本1.1.5中新增，如果只需要检查单个条件，则可以替换更冗长的ng-switch。（修改DOM）
• ng-switch - 用于替代使用多个互斥ng-show（修改DOM）
• ng-disabled 和 ng-readonly - 用于限制表单元素的行为
• ng-animate - 版本1.1.4中新增，用于添加CSS3转换/动画

通常的“Angular方式”涉及将模型/范围属性绑定到将接受用户输入/操作的UI元素上（即使用ng-model），然后将该模型属性关联到上述内置指令之一。

当用户更改UI时，Angular将自动更新页面上的相关元素。

Q1看起来适合ng-class——CSS样式可以在类中捕获。

ng-class 接受一个“表达式”，必须评估为以下之一：

1. 一个由空格分隔的类名字符串
2. 一个类名数组
3. 一个将类名映射到布尔值的映射/对象

假设您的项目使用ng-repeat显示某个数组模型，并且当项目的复选框被选中时，您想应用“pending-delete”类：

   ... HTML to display the item ...
   

以上，我们使用了ng-class表达式类型#3 - 将类名映射到布尔值的映射/对象。

Q2看起来适合ng-style——CSS样式是动态的，因此我们无法为此定义类。

ng-style 接受一个“表达式”，该表达式必须评估为：

1. CSS样式名称和CSS值的映射/对象

假设有一个文本框，用户可以输入背景色的颜色名称（jQuery颜色选择器会更好）：

   ...
   

Fiddle 上述都有一个示例。

这个示例还包括ng-show和ng-hide的示例。如果复选框被选中，除了背景颜色变成粉色外，还会显示一些文本。如果在文本框中输入'red'，一个div就会隐藏。