AngularJS：如何根据数据结构的值设置表格行背景色

你当前的实现思路是可行的，通过ng-class的对象语法就能根据shipping.status的值为表格行绑定不同的背景样式类。下面给你整理优化后的代码方案：

直接在模板中实现（简洁版） #

如果状态数量不多，直接在模板中写判断逻辑足够清晰：

<tr ng-repeat="shipping in shippings" 
    ng-class="{
      'bg-custom bg-danger': shipping.status === 'NONE',
      'bg-custom bg-warning-o': shipping.status === 'SENT',
      'bg-custom bg-warning': shipping.status === 'TRACK_LOST',
      'bg-custom bg-success': shipping.status === 'RECEIVED',
      'bg-custom bg-dark': shipping.status === 'NOT_SUPPORT_TRACK'
    }">
  <!-- 这里添加表格单元格内容 -->
</tr>

• 用===做严格相等判断，避免类型转换导致的意外问题；
• 去掉了没用的ng-init="shippingIndex = $index"（如果没用到这个索引变量的话）；
• 简化了指令写法（ng-*比data-ng-*更常用，AngularJS两者都支持）。

抽离逻辑到控制器（易维护版） #

如果后续状态可能增减或修改样式映射，把逻辑抽离到控制器里会更便于维护：

控制器代码 #

// 在对应的AngularJS控制器中定义状态与样式的映射
$scope.statusClassMap = {
  'NONE': 'bg-custom bg-danger',
  'SENT': 'bg-custom bg-warning-o',
  'TRACK_LOST': 'bg-custom bg-warning',
  'RECEIVED': 'bg-custom bg-success',
  'NOT_SUPPORT_TRACK': 'bg-custom bg-dark'
};

// 或者封装成方法，方便后续扩展逻辑
$scope.getRowClass = function(status) {
  return $scope.statusClassMap[status] || '';
};

模板代码 #

可以选择以下两种写法之一：

<!-- 写法1：直接引用映射对象 -->
<tr ng-repeat="shipping in shippings" ng-class="statusClassMap[shipping.status]">
  <!-- 单元格内容 -->
</tr>

<!-- 写法2：调用控制器方法 -->
<tr ng-repeat="shipping in shippings" ng-class="getRowClass(shipping.status)">
  <!-- 单元格内容 -->
</tr>

这种方式的好处是，后续修改状态对应的样式时，只需要调整控制器里的映射表，不用改动模板代码，代码耦合度更低。

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