自定义 Angular 日期范围过滤器，以仅显示该日期范围内的项目
Custom Angular date range filter to display items only in that date range
im 刚接触 Angularjs 和 im 构建一个通过 json 收集文章的应用程序，json 和我希望能够在单击按钮时显示特定日期范围内的项目.我有逻辑，但我不知道如何从角度前景来处理它。我在一个div中有日期过滤器，在另一个div中有内容。请参阅下面的代码。提前致谢
我的网页
<div class="col-md-3" data-ng-controller="FeedCtrl">
<fieldset class="standard">
<div layout="row" layout-wrap flex >
<div flex="100">
<md-checkbox aria-label="SPORTS">
All ({{((feeds | filter:searchFunction).length) + ((videos | filter:searchFunction).length )+ ((articleContent | filter:searchFunction).length) }})
</md-checkbox>
<md-checkbox aria-label="TECH">
Business News (2)
</md-checkbox>
<md-checkbox aria-label="MOVIES">
Lifestyle News (5)
</md-checkbox>
<md-checkbox aria-label="MOVIES">
Sport News (1)
</md-checkbox>
<md-checkbox aria-label="MOVIES">
Tech News (3)
</md-checkbox>
</div>
</div>
</fieldset>
<fieldset class="standard" >
<div layout="row" layout-wrap flex>
<div flex="75">
<md-checkbox aria-label="Anytime" href ng-click="eventDateFilter('all')">
Anytime
</md-checkbox>
<md-checkbox aria-label="24Hourz">
Last 24 Hours
</md-checkbox>
<md-checkbox aria-label="5days">
Past 5 Days
</md-checkbox>
<md-checkbox aria-label="PastWeek" href ng-click="eventDateFilter('pastWeek')">
Past Week
</md-checkbox>
<md-checkbox aria-label="PastMonth">
Past Month
</md-checkbox>
</div>
</div>
</fieldset>
</div>
<div class="col-md-9" data-ng-controller="FeedCtrl">
<form name="searchForm">
<md-content>
<h1>You searched for: {{searchFunction}}</h1>
<md-input-container class="md-block">
<label>Enter your search terms</label>
<input required name="clientName" ng-model="searchFunction">
</md-input-container>
</md-content>
</form>
<md-content>
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="Videos">
<md-content class="md-padding">
<h1 class="md-display-2">Videos</h1>
<md-list>
<md-list-item class="md-3-line">
<div class="md-list-item-text">
<div class="row">
<div ng-repeat="video in videos | filter:searchFunction" >
<a href="{{video.link}}">
<div class="col-md-4 video-item" >
<img src="images/video.png" width="240" class="face" style="padding-bottom:10px">
<div class="md-list-item-text">
<h3>{{video.title}}</h3>
<h4>{{video.publishedDate | date : format : timezone}}</h4>
<p>{{video.contentSnippet}}</p>
</div>
</div>
</a>
</div>
</div>
</div>
<md-divider ng-if="!$last"></md-divider>
</md-list-item>
</md-list>
</md-content>
</md-tab>
<md-tab label="Images">
<md-content class="md-padding">
<h1 class="md-display-2">Images</h1>
<md-list>
<md-list-item class="md-3-line" data-ng-controller="searchCtrl">
<div class="md-list-item-text">
<div class="row">
<a href="{{articles.link}}">
<div class="col-md-4 video-item" ng-repeat="articles in articleContent | filter:searchFunction">
<img src="{{articles.image}}" width="240" class="face" style="padding-bottom:10px">
<h3>{{articles.title}}</h3>
<p>{{articles.teaser}}</p>
</div>
</a>
</div>
</div>
<md-divider ng-if="!$last"></md-divider>
</md-list-item>
</md-list>
</md-content>
</md-tab>
<md-tab label="Articles">
<div >
<md-content class="md-padding">
<h1 class="md-display-2">Articles</h1>
<md-list>
<div ng-repeat="feed in feeds | filter:searchFunction" >
<a href="{{feed.link}}">
<md-list-item class="md-3-line list-item" style="margin-bottom:20px;">
<img ng-src="{{feed.mediaGroups.url}}" class="face" style="padding-right:20px;">
<div class="md-list-item-text">
<h3>{{feed.title}}</h3>
<h4>{{feed.publishedDate | date : format : timezone}}</h4>
<p>{{feed.contentSnippet}}</p>
</div>
<md-button class="md-warn md-raised md-hue-2">Read more</md-button>
<md-divider ng-if="!$last"></md-divider>
</md-list-item>
</a>
</div>
</md-list>
</md-content>
</div>
</md-tab>
</md-tabs>
</md-content>
</div>
我的 Angular js 代码
var Search = angular.module('searchApp', ['ngMaterial', 'ngMessages']);
var CNNsport = "http://rss.cnn.com/rss/edition_sport.rss";
var CNNlifestyle = "http://rss.cnn.com/rss/edition_entertainment.rss";
var CNNtech = "http://rss.cnn.com/rss/edition_technology.rss";
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth()+1;
var curr_year = d.getFullYear();
Search.controller('searchCtrl',['$scope', '$location', function($scope, $location) {
$scope.sortType = 'name'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchFunction = ''; // set the default search/filter term
$scope.redirectMe = function(evt){
if (evt.which === 13) { $location.path( "/search_page.html" ); }
};
}]);
Search.controller("FeedCtrl", ['$scope','FeedService', function ($scope,Feed) {
$scope.feedSrc= "http://rss.cnn.com/rss/edition_sport.rss";
$scope.feedvideo= "http://rss.cnn.com/rss/cnn_freevideo.rss";
$scope.loadFeed = function () {
Feed.parseFeed($scope.feedSrc).then(function (res) {
$scope.feeds = res.data.responseData.feed.entries;
});
};
$scope.loadvideoFeed = function () {
Feed.parseFeed($scope.feedvideo).then(function (res) {
$scope.videos = res.data.responseData.feed.entries;
});
};
$scope.loadFeed();
$scope.loadvideoFeed();
$scope.dateToday = Date.parse(curr_month + "/" + curr_date + "/" + curr_year);
$scope.dateRange = "";
$scope.eventDateFilter = function(column) {
if(column === 'today') {
$scope.dateRange = $scope.dateToday;
} else if (column === 'pastWeek') {
//need logic
} else if (column === 'pastMonth') {
//need logic
} else if (column === 'future') {
//need logic
} else {
$scope.dateRange = "";
}
};
$scope.articleContent = [
{
title: 'Lorem 1',
type: 'Image',
image: 'http://dummyimage.com/150x150/000/fff&text=Sample+Images',
teaser: 'orem ipsum dolor sit amet, consectetur adipisicing elit. Eum soluta minima qui',
catergory: 'sport',
date: 'Feb 03, 2016'
},
{
title: 'Anthony 2',
type: 'Video',
image: 'http://dummyimage.com/150x150/000/fff&text=Sample+Images',
teaser: 'orem ipsum dolor sit amet, consectetur adipisicing elit. soluta minima qui',
catergory: 'tech',
date: 'Feb 03, 2016'
},
{
title: 'Munei 3',
type: 'article',
image: 'http://dummyimage.com/150x150/000/fff&text=Sample+Images',
teaser: 'orem ipsum dolor sit amet, consectetur adipisicing elit. Eum soluta minima qui',
catergory: 'business',
date: 'Feb 03, 2016'
},
{
title: 'Lorem 4',
type: 'Image',
image: 'http://dummyimage.com/150x150/000/fff&text=Sample+Images',
teaser: 'orem ipsum dolor sit amet, consectetur adipisicing elit. Eum soluta qui',
catergory: 'lifestyle',
date: 'Feb 03, 2016'
},
{
title: 'Test 5',
type: 'video',
image: 'http://dummyimage.com/150x150/000/fff&text=Sample+Images',
teaser: 'orem ipsum dolor sit amet, consectetur adipisicing elit. Eum soluta minima qui',
catergory: 'tech',
date: 'Feb 03, 2016'
},
{
title: 'Breaking 6',
type: 'Image',
image: 'http://dummyimage.com/150x150/000/fff&text=Sample+Images',
teaser: 'orem ipsum dolor sit amet, consectetur adipisicing elit. Eum soluta minima ',
catergory: 'sport',
date: 'Feb 03, 2016'
}
];
}]);
Search.factory('FeedService', ['$http', function($http){
return {
parseFeed: function (url) {
return $http.jsonp('http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=6&callback=JSON_CALLBACK&q=' + encodeURIComponent(url));
}
};
}]);
我不知道
这是否是您正在寻找的答案，但我很快就对您的数组进行了基本的日期过滤。我根本不使用任何过滤器，而是将数组复制到另一个进行过滤的数组中：
if (articleDate >= startDate && articleDate <= endDate) {
$scope.displayArticles.push(article);
};
见小提琴：https://jsfiddle.net/oligustafsson/eh67fLx3/
通常，我只将角度过滤器用于简单的任务，例如显示货币等，并且不包含任何基本逻辑。在您的情况下，我的方法可能是拥有一个项目集合和一个过滤器集合，并将它们包装在服务中并在控制器中使用它。
您只需要在ng-repeat中添加一个额外的过滤器：
<div class="col-md-4 video-item" ng-repeat="articles in articleContent | searchFunction | dateRangeFilter">
<!-- your code -->
</div>
并将该过滤器定义为一个函数，如果要过滤掉文章，则返回false，如果要保留文章，则返回true：
$scope.dateRangeFilter = function (article) {
if (/* want to keep */) {
return true;
}
return false;
}
相关文章：
- 将时区格式的日期显示为UTC时间
- 如何根据所选日期显示警告
- JavaScript日期显示
- 如何使用 DHTMLX 甘特图扩展甘特图的日期显示
- 如何根据当前日期显示两周期间的第一天
- 日期选取器将今天的日期显示为默认值，并且仅适用于 GET
- 由于时区的原因，字符串的新日期显示为前一天
- 如何使用JavaScript将日期显示为DD/MM/YY格式
- fullCalendar.js:按选定日期显示事件
- javascript getDay(）为旧日期显示错误的日期
- 在JSON中按日期显示数组出现的次数
- 根据所选日期显示信息
- Jquery日期选择器所有日期显示为不可选择
- 从数据库中按日期显示日历上的事件
- Jqgrid中的日期显示休息1天
- 基于日期显示日期的Javascript
- CouchDB map/reduce函数按日期显示用户的有限结果
- JavaScript日期显示错误的日期和时间
- 我通过javascript突出显示的当前日期显示不正确
- 使用JavaScript进行查询，以便在HTML文档中按日期显示事件
