我是angularjs的新手，我正在构建一个收集文章的应用程序，json和我希望能够在单击按钮时显示特定日期范围内的项目。我有逻辑但我不知道如何处理它从有角度的角度来看。我有一个div中的日期过滤器和另一个div中的内容。请参阅下面的代码。谢谢提前
我的Html
<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>
My Angular Js Code
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));
}
};
}]);
答案 0 :(得分：0)
我不知道这是否是您正在寻找的答案，但我很快就对您的阵列进行了初步过滤。我根本不使用任何过滤器，而是将数组复制到我进行过滤的另一个过滤器：
if (articleDate >= startDate && articleDate <= endDate) {
$scope.displayArticles.push(article);
};
见小提琴： https://jsfiddle.net/oligustafsson/eh67fLx3/
通常我只使用角度过滤器来处理简单的任务，例如显示货币等，并且不包含任何基本逻辑。在您的情况下，我的方法可能是拥有一个项集合和一个过滤器集合，并将它们包装在一个服务中并在控制器中使用它。
答案 1 :(得分：0)
您只需向ng-repeat添加额外的过滤条件：
<div class="col-md-4 video-item" ng-repeat="articles in articleContent | searchFunction | dateRangeFilter">
<!-- your code -->
</div>
如果要过滤文章，请将过滤器定义为返回false的函数;如果要保留文章，则将true定义为：{/ p>
$scope.dateRangeFilter = function (article) {
if (/* want to keep */) {
return true;
}
return false;
}