如何使用ng-class组合样式类？Angular新手寻求解决方案

嘿，作为Angular新手碰到这种需求太正常啦！其实ng-class提供了好几种方式来实现“满足单个条件时同时添加多个类”的效果，我给你整理几个最实用的方案：

方案一：对象语法（简洁版） #

这是最直观的写法之一，直接把多个类名放在一起，用同一个判断条件控制：

<div ng-class="{ 'save firstClass': something === 'First' }"></div>

当something等于'First'时，save和firstClass这两个类会同时被应用到这个div上。

方案二：对象语法（拆分版） #

如果之后需要给不同类加不同的判断条件，也可以把它们分开写，逻辑更清晰：

<div ng-class="{ 
  'save': something === 'First', 
  'firstClass': something === 'First' 
}"></div>

这种写法的好处是，万一以后其中一个类的触发条件变了，直接修改对应的条件就行。

方案三：数组语法 + 三元表达式 #

用数组结合三元表达式也能实现，适合需要搭配其他类的场景：

<div ng-class="[something === 'First' ? 'save firstClass' : '']"></div>

如果还有其他固定类或者条件类，也可以一起放到数组里，比如：

<div ng-class="[something === 'First' ? 'save firstClass' : '', 'always-applied-class']"></div>

方案四：控制器函数（适合复杂逻辑） #

如果你的判断逻辑不止这一个条件，或者以后可能扩展，把类的判断放到控制器里会让模板更干净：
在控制器里定义一个函数：

$scope.getStatusClasses = function() {
  const classes = [];
  if ($scope.something === 'First') {
    classes.push('save');
    classes.push('firstClass');
  }
  // 这里可以添加更多判断逻辑，比如其他值对应的类
  return classes.join(' ');
};

然后在模板里调用这个函数：

<div ng-class="getStatusClasses()"></div>

这些方法里，我个人推荐方案一（简洁对象语法），因为它最直接，代码量最少，完全能满足你当前的需求～

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