Angularjs - 匹配日期数组中的日期以找到最接近的匹配项以显示在下拉列表中答案

【问题标题】：Angularjs - match a date from an array of dates to find the closest match to display in a dropdownAngularjs - 匹配日期数组中的日期以找到最接近的匹配项以显示在下拉列表中
【发布时间】：2017-04-30 11:23:50
【问题描述】：

你好，请看下面我的 plunkr

https://plnkr.co/edit/8cJZsb?p=preview

我有 $scope.data 看起来像这样

 $scope.data = [  
    {  
      "projectedStart":"2017-01-20T00:00:00"      
   },
   {  
      "projectedStart":"2017-02-09T00:00:00"      
   }
];

和 $scope.possibleDates 看起来像这样

   $scope.possibleDates = [{  
      "projectedStartDate":"2017-01-25T00:00:00",
      "dateName":"January - Week 4 (20/10)"
   },
   {  
      "projectedStartDate":"2017-02-01T00:00:00",
      "dateName":"February (6/10)"
   },
   {  
      "projectedStartDate":"2017-03-01T00:00:00",
      "dateName":"March (0/2)"
   },
   {  
      "projectedStartDate":"2017-04-05T00:00:00",
      "dateName":"April (2/5)"
   }]

在前端下拉列表中，我希望能够显示与 $scope.data 中的“projectedStart”日期最接近的可能日期。

我正在考虑做一个角度foreach并循环遍历$scope.data中的每个projectedStart日期，并以某种方式将它与$scope.possibleDates中的每个日期进行比较，并用最接近的匹配更新$scope.Data的projectedStart？到现在都失败得很惨。

如果有人能指出我正确的方向，将不胜感激

【问题讨论】：

当您说“匹配最接近...的可能日期”时，您要查找多少个？ 2 最接近的比赛？ 3?
我正在寻找 1 个匹配或最接近的日期

标签： javascript angularjs

【解决方案1】：

看起来您需要查看moment.js。这是一个用于日期解析、格式化和比较的出色库。

【讨论】：

【解决方案2】：

您可以在可能的日期上放置一个观察者，当它们发生变化时，您计算您所追求的列表。

可以使用矩和下划线等工具轻松编写列表。

const projectedDate = moment($scope.data[0].projectedStartDate);
const sortedPossibleDates = _.chain($scope.possibleDates)
   .each((possibleDate) => {
     possibleDate.diff = projectedDate.difference('seconds');
   });
   .sortBy('diff')
   .value()

瞧，sortedPossibleDates[0] 是您的最佳答案

【讨论】：

【解决方案3】：

一个基本的排序函数应该能够根据它们与所选开始日期的接近程度对可能的日期进行排序。只需使用 new Date(ISOString) 来获取数字时间戳。

发件人：https://stackoverflow.com/a/11796365/6452040

【讨论】：

【解决方案4】：

如果你像这样在 script.js 中放置一个函数，它会找到最接近的日期（之前或之后）：

$scope.closestStartDate = function(startDate) {
    var smallestDifferenceInDates = 1000000000000;//impossibly large value
    var closestDateName = 'tmp';
    var date = new Date(startDate);

   for (var i = 0; i < Object.keys($scope.possibleDates).length; i++) {
      var projectedDate = new Date($scope.possibleDates[i].projectedStartDate);
      if (Math.abs(date.getTime() - projectedDate.getTime()) < smallestDifferenceInDates) {
        smallestDifferenceInDates = Math.abs(date.getTime() - projectedDate.getTime());
      closestDateName = $scope.possibleDates[i].dateName;
    }
  }
  return closestDateName;
}

然后将您的模板代码更改为：

<tr ng-repeat="d in data">
    <td>
        {{ closestStartDate(d.projectedStart) }}
    </td>
</tr>

您将从 $scope.possibleDates 获得最接近的日期（Math.abs() 获取两者之间的距离，如果您想要日期之后可以将其关闭）。

【讨论】：