angularJS ng-repeat 过滤器的日期大于数组中的日期答案

【问题标题】：angularJS ng-repeat with filter for date greater than where date in arrayangularJS ng-repeat 过滤器的日期大于数组中的日期
【发布时间】：2016-09-25 20:14:56
【问题描述】：

我找了很多地方，但似乎找不到我要找的东西。这可能很简单，但我对角度比较陌生，似乎无法弄清楚。

ng-repeat 可以正常工作，但我想过滤掉某些值。

我有一个包含 ng-repeat 数据的页面（请参阅下面的数据对象），我只想包含当前日期 > 数组中的项目值（日期）的页面。

     vm.newsItems= [
       {
           ID: '1',
           date: '5/12/2016',
           newsTitle: 'This is news story header 1',
           newsText: 'This is news Story Text 1.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
       },
       {
           ID: '2',
           date: '5/30/2016',
           newsTitle: 'This is news story header 2',
           newsText: 'This is news Story Text 2.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
       }

页面代码：

    <div class="box effect8" ng-repeat="newsItem in vm.newsItems">
                <h3>{{newsItem.newsTitle}}</h3>
                {{newsItem.newsText}}
            </div>

【问题讨论】：

当前日期我猜你的意思是今天？
这可以使用date 过滤器来完成。但是您的 JSON 对象中的日期参数必须是 javascript 的日期类型。
@Yogesh 日期过滤器用于格式化Date 显示格式，而不是用于过滤掉数组中的项目
糟糕，您确实是正确的@NexusDuck。感谢您指出。

标签： angularjs filter angularjs-ng-repeat

【解决方案1】：

尝试添加带有filter $filter 的谓词以过滤掉项目：

newsItem in vm.newsItems | filter: getItemsFromThePast()

vm.getItemsFromThePast =  function(item) {
  var today = new Date();
  return item.date < today;
}

我在这里假设两件事：

当前日期是指new Date()
您的对象的属性date 是实际的Date 对象，如果它们是日期格式的字符串，您必须先将它们转换为Date 对象

【讨论】：

#NexusDuck 是的，我的意思是 new Date() 我更新了我的代码（并添加了转换日期的函数），但没有调用过滤器函数。我在那里添加了一个警报，它没有触发，所以它没有被调用。我按照你的指示加入了，但由于某种原因它没有击中它。
它仍然有效意味着对象中的所有项目都在显示，所以它仍然有效，只是过滤片永远不会被调用
你能提供一个 plunkr /fiddle 吗？
我正在使用单页应用程序并且有路由，我不这么认为，但这会干扰吗？我在任何地方都没有同名的东西。

【解决方案2】：

检查Codepen。这对你有用。我已将日期字符串转换为对象并将其与过滤器一起使用

var myApp = angular.module('myApp', []);

 myApp.controller('MyController', function ($scope) {

 $scope.newsItems= [
   {
       ID: '1',
       date: '5/12/2016',
       newsTitle: 'This is news story header 1',
       newsText: 'Some text.'
   },
   {
       ID: '2',
       date: '5/30/2016',
       newsTitle: 'This is news story header 2',
       newsText: 'Some text.'
   }
];

 angular.forEach($scope.newsItems, function(value,key) {
  value.date = new Date(value.date);
 });

 $scope.filterDate =  function(newsItem) {
  var today = new Date();   
  return newsItem.date < today;
 }

});

【讨论】：