AngularJS：如何将表格自动滚动到ng-init初始化的当前日期？

当然可以实现自动滚动到当前日期的功能！针对你用AngularJS构建的这个日期表格，我给你几个实用的解决方案，一步步来：

方案一：控制器内直接实现（快速上手） #

首先我们要确保能精准定位到当前日期对应的行，然后触发滚动。这里分两步走：

1. 修改HTML，给行添加日期标识
   为了避免通过文本内容匹配可能出现的误差，我们给每个<tr>加一个data-date属性，绑定对应的日期值：

<table id="daysTableLeft" class="table table-hover" ng-init="getHorraire(pickDateRow,$index,0)"> 
  <tr ng-repeat="fd in getFullDayDate track by $index" 
      ng-click="getHorraire(fd.myDate,$index,1)" 
      style="cursor:pointer" 
      ng-model="pickDateRow" 
      ng-class="{activeLink: $index===selectedIndex, weekend: fd.dayName=='Samedi'|| fd.dayName=='Dimanche'}"
      data-date="{{fd.myDate}}"> <!-- 新增日期标识属性 -->
    <td style="font-size:14px;" id="{{fd.$index}}"> {{fd.fullDate}}, 2018</td> 
  </tr> 
  <tr><td style="height:80px;"></td></tr> 
</table>

2. 在控制器中添加滚动逻辑
   因为AngularJS的ng-repeat是异步渲染DOM的，所以我们需要用$timeout确保DOM渲染完成后再执行滚动操作。同时要把当前日期格式化成和fd.myDate完全一致的格式：

// 确保控制器注入$filter和$timeout
app.controller('YourController', function($scope, $filter, $timeout) {
  // ... 你的其他业务代码 ...

  // 获取并格式化当前日期，格式要和fd.myDate完全匹配（示例为dd/MM/yyyy）
  var today = new Date();
  var formattedToday = $filter('date')(today, 'dd/MM/yyyy');

  // 等待DOM渲染完成后执行滚动
  $timeout(function() {
    // 定位到目标行
    var targetRow = document.querySelector('#daysTableLeft tr[data-date="' + formattedToday + '"]');
    if (targetRow) {
      // 平滑滚动到该行，设置为居中显示
      targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  });
});

方案二：自定义指令（模块化复用） #

如果你的项目里有多个类似的滚动需求，建议封装成AngularJS指令，这样代码更整洁，复用性更强：

1. 创建自定义指令

app.directive('scrollToToday', function($timeout, $filter) {
  return {
    link: function(scope, element, attrs) {
      $timeout(function() {
        // 允许通过指令属性自定义日期格式，默认使用dd/MM/yyyy
        var dateFormat = attrs.dateFormat || 'dd/MM/yyyy';
        var formattedToday = $filter('date')(new Date(), dateFormat);
        
        // 查找目标行
        var targetRow = element[0].querySelector('tr[data-date="' + formattedToday + '"]');
        if (targetRow) {
          targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
      });
    }
  };
});

2. 在表格上应用指令
   直接在你的表格标签上添加指令即可，还可以自定义日期格式：

<table id="daysTableLeft" class="table table-hover" 
       ng-init="getHorraire(pickDateRow,$index,0)"
       scroll-to-today date-format="dd/MM/yyyy">

特殊情况处理：表格在固定高度容器内 #

如果你的表格是放在一个带滚动条的固定高度容器里（比如overflow-y: auto的<div>），那需要滚动的是容器而非整个页面。这时候调整滚动逻辑：

$timeout(function() {
  var targetRow = document.querySelector('#daysTableLeft tr[data-date="' + formattedToday + '"]');
  var container = document.getElementById('yourContainerId'); // 替换成你的容器ID
  if (targetRow && container) {
    // 计算滚动位置，让目标行居中显示
    var scrollPosition = targetRow.offsetTop - (container.offsetHeight / 2);
    // 平滑滚动容器
    container.scrollTo({
      top: scrollPosition,
      behavior: 'smooth'
    });
  }
});

注意事项 #

• 一定要确保formattedToday的格式和fd.myDate完全一致，否则会找不到目标行；
• scrollIntoView的behavior: 'smooth'是现代浏览器支持的平滑滚动效果，如果需要兼容旧浏览器，可以去掉这个参数；
• 如果你的日期是法语格式（比如例子里的Samedi/Dimanche），记得调整$filter('date')的本地化设置，确保日期格式匹配。

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