Angular：根据条件设置表格行样式（即将到来的节假日高亮）

首先，你代码里有个小语法问题：ng-style 应该接收样式对象，而不是字符串。原来的写法会导致样式不生效，先把这部分修正过来。

修正后的HTML代码 #

<table ng-if="model.Holidays" class="table">
  <tr>
    <th>Holiday</th>
    <th>Date</th>
    <th>Branch</th>
    <th>Hours</th>
  </tr>
  <tr ng-repeat="holiday in model.Holidays" 
      ng-style="isUpcomingHoliday(holiday.HolidayDate) ? { color: '#0093ff' } : {}">
    <td>{{holiday.HolidayName}}</td>
    <td>{{holiday.HolidayDate | date:'yyyy-MM-dd'}}</td>
    <td>{{holiday.Branch}}</td>
    <td>{{holiday.Hours}}</td>
  </tr>
</table>

实现核心判断函数 #

接下来需要在你的Angular控制器里实现 isUpcomingHoliday 函数，用来判断当前遍历的节假日是否是下一个即将到来的。这个函数需要完成以下几步：

1. 过滤出所有在今天及之后的节假日
2. 找到其中日期最早的那个（也就是下一个节假日）
3. 判断传入的日期是否和这个最早日期匹配

示例代码如下：

$scope.isUpcomingHoliday = function(holidayDateStr) {
  // 把字符串日期转为Date对象，同时清除时间部分避免干扰
  const holidayDate = new Date(holidayDateStr);
  holidayDate.setHours(0, 0, 0, 0);
  
  // 获取今天的日期，同样清除时间部分
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  
  // 筛选出未来的节假日
  const futureHolidays = $scope.model.Holidays.filter(item => {
    const date = new Date(item.HolidayDate);
    date.setHours(0, 0, 0, 0);
    return date >= today;
  });
  
  // 如果没有未来节假日，直接返回false
  if (futureHolidays.length === 0) return false;
  
  // 找到日期最早的未来节假日
  const earliestHoliday = futureHolidays.reduce((prev, curr) => {
    const prevDate = new Date(prev.HolidayDate);
    const currDate = new Date(curr.HolidayDate);
    return prevDate < currDate ? prev : curr;
  });
  
  // 对比当前传入的日期和最早节假日的日期
  const earliestDate = new Date(earliestHoliday.HolidayDate);
  earliestDate.setHours(0, 0, 0, 0);
  
  return holidayDate.getTime() === earliestDate.getTime();
};

更优方案：用ng-class替代ng-style #

如果希望样式和逻辑分离，方便后续维护，推荐使用 ng-class 而不是 ng-style：

1. 先定义CSS类：

.upcoming-holiday {
  color: #0093ff;
}

2. 修改HTML中的行：

<tr ng-repeat="holiday in model.Holidays" 
    ng-class="{'upcoming-holiday': isUpcomingHoliday(holiday.HolidayDate)}">

这样以后要调整颜色或者添加其他样式，直接修改CSS即可，不需要改动逻辑代码。

内容的提问来源于stack exchange，提问作者Charles L.