AngularJS：用ng-repeat按yyyy/mm/dd展示本周数据并过滤过期数据

嘿，我来帮你搞定这两个AngularJS相关的问题，咱们一步步来解决：

你的数据里date字段已经是yyyy/mm/dd格式了，所以显示格式不是问题，核心是筛选出本周的数据。咱们可以在控制器里添加一个函数来判断某条数据的日期是否属于本周，然后结合ng-repeat的过滤功能来实现。

首先，在控制器里添加计算本周起止日期的逻辑，以及判断日期是否在本周内的函数：

angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.register = {
    regData: { branch: {}, },
    names: [
      {name:"narquois",date:"2019/03/30"},
      {name:"vorpal",date:"2019/03/28"},
      {name:"keen",date:"2019/03/25"},
      {name:"argol",date:"2019/03/18"},
      {name:"long",date:"2019/03/17"},
      {name:"propolis",date:"2019/03/16"}
    ],
  };

  // 辅助函数：将yyyy/mm/dd格式的字符串转为Date对象
  function parseDate(dateStr) {
    const [year, month, day] = dateStr.split('/').map(Number);
    // 注意月份是0开始的，所以要减1
    return new Date(year, month - 1, day);
  }

  // 获取本周的开始日期（周一）和结束日期（周日）
  function getWeekRange() {
    const today = new Date();
    const dayOfWeek = today.getDay();
    // 计算周一：处理周日的特殊情况（周日是0，需要往前推6天）
    const startOfWeek = new Date(today);
    startOfWeek.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1));
    startOfWeek.setHours(0, 0, 0, 0);

    const endOfWeek = new Date(startOfWeek);
    endOfWeek.setDate(startOfWeek.getDate() + 6);
    endOfWeek.setHours(23, 59, 59, 999);

    return { start: startOfWeek, end: endOfWeek };
  }

  // 判断日期是否在本周内
  $scope.isThisWeek = function(dateStr) {
    const date = parseDate(dateStr);
    const { start, end } = getWeekRange();
    return date >= start && date <= end;
  };
}]);

然后在ng-repeat里添加过滤条件，就能只显示本周的数据了：

<tr ng-repeat="person in register.names | filter:isThisWeek">
  <td align="center">{{ person.name }}</td>
  <td align="center">{{ person.date }}</td>
</tr>

这个需求的核心是过滤掉早于指定时间的日期，比如你说的上周数据不再显示。其实和第一个问题的逻辑类似，只是可以根据需求调整过滤规则：

如果你的需求是只保留本周及以后的数据，上面的isThisWeek函数已经能实现。如果需要更灵活的规则（比如隐藏早于当前日期7天前的数据），可以修改过滤函数：

// 判断日期是否未过期（不早于7天前）
$scope.isNotExpired = function(dateStr) {
  const date = parseDate(dateStr);
  const sevenDaysAgo = new Date();
  sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
  sevenDaysAgo.setHours(0, 0, 0, 0);
  return date >= sevenDaysAgo;
};

然后修改ng-repeat：

<tr ng-repeat="person in register.names | filter:isNotExpired">
  <td align="center">{{ person.name }}</td>
  <td align="center">{{ person.date }}</td>
</tr>

完整可运行代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
  <table id="example" width="100%">
    <thead>
      <tr align="center">
        <th>Name</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="person in register.names | filter:isThisWeek">
        <td align="center">{{ person.name }}</td>
        <td align="center">{{ person.date }}</td>
      </tr>
    </tbody>
  </table>
</div>

<script>
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.register = {
    regData: { branch: {}, },
    names: [
      {name:"narquois",date:"2019/03/30"},
      {name:"vorpal",date:"2019/03/28"},
      {name:"keen",date:"2019/03/25"},
      {name:"argol",date:"2019/03/18"},
      {name:"long",date:"2019/03/17"},
      {name:"propolis",date:"2019/03/16"}
    ],
  };

  function parseDate(dateStr) {
    const [year, month, day] = dateStr.split('/').map(Number);
    return new Date(year, month - 1, day);
  }

  function getWeekRange() {
    const today = new Date();
    const dayOfWeek = today.getDay();
    const startOfWeek = new Date(today);
    startOfWeek.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1));
    startOfWeek.setHours(0, 0, 0, 0);

    const endOfWeek = new Date(startOfWeek);
    endOfWeek.setDate(startOfWeek.getDate() + 6);
    endOfWeek.setHours(23, 59, 59, 999);

    return { start: startOfWeek, end: endOfWeek };
  }

  $scope.isThisWeek = function(dateStr) {
    const date = parseDate(dateStr);
    const { start, end } = getWeekRange();
    return date >= start && date <= end;
  };
}]);
</script>

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