фильтр данные JSON по текущей дате с помощью Angular

Question

Я пытаюсь фильтровать данные JSON по текущей дате, используя Angular. Я видел некоторые подобные сообщения, но я не могу правильно реализовать ответы. Я попытался написать настраиваемый фильтр, сравнивающий today, который является именем переменной var, содержащей мой объект даты с doc.date, который является местоположением JSON записи даты, которую я хочу фильтровать.

Мои данные JSON выглядит следующим образом:

var books = 

[ 
    { 
     "doc":{ 
     "date":"07/14", 
     "title":"A Nourishing Ingredient", 
     "quote":"Where humility had formerly stood for a forced feeding on humble pie, it now begins to mean the nourishing ingredient which can give us serenity.", 
     "attribution":"page 74", 
     "text":"How often do I focus on my problems and frustrations? When I am having a 'good day' these same problems shrink in importance and my preoccupation with them dwindles. Wouldn't it be better if I could find a key to unlock the 'magic' of my 'good days' for use on the woes of my 'bad days?'. I already have the solution! Instead of trying to run away from my pain and wish my problems away, I can pray for humility! Humility will heal the pain. Humility will take me out of myself. Humility, that strength granted to me by that 'power greater than myself,' is mine for the asking! Humility will bring balance back into my life. Humility will allow me to accept my humanness joyously." 
    } 
}, 
{ 
    "doc":{ 
    "date":"07/15", 
    "title":"Pride", 
    "quote":"Time and again I approached the Seventh Step, only to fall back and regroup. Something was missing and the impact of the Step escaped me. What had I overlooked? A single word: read but ignored, the foundation of all the Steps, indeed the entire Alcoholics Anonymous program – that word is 'humbly.' I understood my shortcomings: I constantly put tasks off; I angered easily; I felt too much self-pity; and I thought, why me? Then I remembered, 'Pride goeth before the fall,' and I eliminated pride from my life." 
    } 
} 
] 

Мои JS:

var today = new Date(); 
var dd = today.getDate(); 
var mm = today.getMonth()+1;//January is 0, so always add + 1 

var yyyy = today.getFullYear(); 
if(dd<10){dd='0'+dd} 
if(mm<10){mm='0'+mm} 
today = mm+'/'+dd; 
console.log(today); 

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

myApplication.controller("Catalog", function ($scope) { 

$scope.books = books; 


}) 

.filter('mydate', function() { 

      return function (doc.date, today) { 
      return doc.date < today; 
     }; 

    }); 

Мой HTML:

<div ng-app="myApp" ng-controller="Catalog"> 


<div ng-repeat="book in books | mydate" color-this="background-color" data-color="book.doc.title"> 
    <div > 
    <div class="date">{{book.doc.date}}</div> 
    <div class="title">{{book.doc.title}}</div> 
    <div class="quote">{{book.doc.quote}}</div> 
    <div class="attribution">{{book.doc.attribution}}</div> 
    <div class="text">{{book.doc.text}}</div> 
    </div> 
</div> 

Answer 1

Пожалуйста, найдите код, приведенный ниже. Надеюсь, что это поможет вам.

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

 
myApplication.controller("Catalog", function($scope) { 
 
    var books = [{ 
 
    "doc": { 
 
     "date": "07/15", 
 
     "title": "A Nourishing Ingredient", 
 
     "quote": "Where humility had formerly stood for a forced feeding on humble pie, it now begins to mean the nourishing ingredient which can give us serenity.", 
 
     "attribution": "page 74", 
 
     "text": "How often do I focus on my problems and frustrations? When I am having a 'good day' these same problems shrink in importance and my preoccupation with them dwindles. Wouldn't it be better if I could find a key to unlock the 'magic' of my 'good days' for use on the woes of my 'bad days?'. I already have the solution! Instead of trying to run away from my pain and wish my problems away, I can pray for humility! Humility will heal the pain. Humility will take me out of myself. Humility, that strength granted to me by that 'power greater than myself,' is mine for the asking! Humility will bring balance back into my life. Humility will allow me to accept my humanness joyously." 
 
    } 
 
    }, { 
 
    "doc": { 
 
     "date": "07/16", 
 
     "title": "Pride", 
 
     "quote": "Time and again I approached the Seventh Step, only to fall back and regroup. Something was missing and the impact of the Step escaped me. What had I overlooked? A single word: read but ignored, the foundation of all the Steps, indeed the entire Alcoholics Anonymous program – that word is 'humbly.' I understood my shortcomings: I constantly put tasks off; I angered easily; I felt too much self-pity; and I thought, why me? Then I remembered, 'Pride goeth before the fall,' and I eliminated pride from my life." 
 
    } 
 
    }] 
 
    $scope.books = books; 
 
}); 
 

 
myApplication.filter('mydate', function() { 
 
    return function(input) { 
 
    var today = new Date(); 
 
    var dd = today.getDate(); 
 
    var mm = today.getMonth() + 1; //January is 0, so always add + 1 
 
    var yyyy = today.getFullYear(); 
 
    if (dd < 10) { 
 
     dd = '0' + dd 
 
    } 
 
    if (mm < 10) { 
 
     mm = '0' + mm 
 
    } 
 
    today = mm + '/' + dd; 
 
    return (input == today) 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div ng-app="myApp" ng-controller="Catalog"> 
 
    <div ng-repeat="book in books" color-this="background-color" data-color="book.doc.title"> 
 
     <div ng-show=" book.doc.date | mydate"> 
 
     <div class="date">{{book.doc.date}}</div> 
 
     <div class="title">{{book.doc.title}}</div> 
 
     <div class="quote">{{book.doc.quote}}</div> 
 
     <div class="attribution">{{book.doc.attribution}}</div> 
 
     <div class="text">{{book.doc.text}}</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Рекомендуется: Такого рода бизнес-логики должно быть место в обслуживании для лучшей производительности в реальном мире дела.