求助：如何用ng-class根据多条件为元素动态添加CSS类

嘿，这个需求用ng-class来实现简直完美，比堆一堆ng-if要优雅太多了！我给你两种实用的实现方式，你可以根据场景选：

方法一：模板内直接用对象语法判断 #

这种方式适合逻辑简单的场景，直接在模板里把每个类对应的区间条件写清楚，一目了然：

<div ng-class="{
  'firstLabel': data.percentage >= 0 && data.percentage < 25,
  'secondLabel': data.percentage >= 25 && data.percentage < 50,
  'thirdLabel': data.percentage >= 50 && data.percentage < 75,
  'fourthLabel': data.percentage >= 75 && data.percentage <= 100
}"></div>

ng-class的对象语法会自动给满足条件的键对应的类名加上，而且这些条件是互斥的，所以同一时间只会有一个类被应用，完全符合你的需求——比如当data.percentage等于75时，第四个条件触发，就会渲染成<div class="fourthLabel"></div>。

方法二：控制器封装逻辑函数（更易维护） #

如果以后可能要调整区间或者类名，把逻辑放到控制器里会更方便维护，模板也会更干净：
首先在你的AngularJS控制器里加一个函数：

$scope.getLabelClass = function(percentage) {
  // 先处理边界情况，防止数值超出0-100的范围
  if (percentage < 0) return 'defaultLabel';
  if (percentage > 100) return 'defaultLabel';

  if (percentage < 25) {
    return 'firstLabel';
  } else if (percentage < 50) {
    return 'secondLabel';
  } else if (percentage < 75) {
    return 'thirdLabel';
  } else {
    // 剩下的就是75到100的情况
    return 'fourthLabel';
  }
};

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

<div ng-class="getLabelClass(data.percentage)"></div>

这种方式的好处是，所有区间判断逻辑都集中在控制器里，后续修改只需要改这一个函数就行，不用去模板里找一堆条件，而且还能处理数值超出0-100的异常情况，给个默认类兜底。

两种方式都能实现你的需求，看你更喜欢哪种风格啦！

内容的提问来源于stack exchange，提问作者Mr world wide