Angular: 27205559

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-controller="MyCtrl">

  <button ng-click="filterArticles(1)">last 24h</button>
  <button ng-click="filterArticles(5)">last 5 days</button>
  <button ng-click="filterArticles(0)">all</button>
  <ul>
    <li ng-repeat="article in displayArticles">
      {{ article.title }}, {{ article.date }}
    </li>
  </ul>

</div>

JavaScript

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

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


  $scope.filterArticles = function(numberOfDays) {
    numberOfDays = numberOfDays || 0;

    if (numberOfDays < 1) {
      $scope.displayArticles = $scope.articleContent;
      return;
    }

    var startDate = new Date();
    startDate.setHours(0, 0, 0, 0);
    var endDate = new Date();
    endDate.setDate(endDate.getDate() + numberOfDays);
    $scope.displayArticles = [];

    angular.forEach($scope.articleContent, function(article) {
      var articleDate = new Date(article.date);

      if (articleDate >= startDate && articleDate <= endDate) {
        $scope.displayArticles.push(article);
      };


    });
  };

  $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: 'Mar 11, 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: 'Mar 12, 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: 'Mar 14, 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: 'Mar 16, 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...