CODEWITHSUNDEEP
javascriptangularjs
Spencer Pope
Spencer Pope

Reputation: 475

angular.js filter by month

I am trying to make a filter that will just display json entries for a certain month, January. However, I am having trouble. I tried setting variables for Jan and Feb and then setting the input to be greater than the first date in Jan and less than the first date in Feb, but this hasn't worked. Any help would be greatly appreciated.

Here is my html:

<div ng-app="myApp" ng-controller="Catalog">
<div class="bg" ng-repeat="book in books">
    <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="textt">{{book.doc.text}}</div>
  <div style="height:10px"></div>      
  </div>
  </div>

  <div class="bg" ng-repeat="book in books ">
  <div ng-click="showInfo = !showInfo" ng-show=" book.doc.date | January">
  <div class="date">{{book.doc.date}}</div>
  <div class="title">{{book.doc.title}}</div>
        <div class="quote"  ng-show="showInfo">{{book.doc.quote}}</div>
            <div class="attribution" ng-show="showInfo">-    {{book.doc.attribution}}</div>
                <div class="textt" ng-show="showInfo">{{book.doc.text}}       </div>    
<div style="height:10px"></div>    
</div>
</div>
</div>

and my JS:

var myApplication = angular.module('myApp', ['ngColorThis']);
myApplication.controller("Catalog", function ($scope) {
$scope.books = books;
$scope.showInfo = false;
})

.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)
}
})

.filter('past', 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)
}
})

.filter('January', 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;
var jan = 00 + "/" +00;
var feb = 01 + "/" + 00;
return (input > jan && input < feb)
}
});

Also here is a full plunker of my project.

Upvotes: 0

Views: 136

Answers (2)

Shaishab Roy
Shaishab Roy

Reputation: 16805

you should use filter in your filter expression 

<div ng-show=" book.doc.date | filter: mydate" >

and 

<div ng-click="showInfo = !showInfo" ng-show=" book.doc.date | filter: January">

Upvotes: 1

marapet
marapet

Reputation: 56466

The easiest way to make your January filter work is the following:

.filter('January', function() {
  return function(input) {
    return input.slice(0,2) === '01';
  }
});

As you can see, all that is needed is a simple comparison of the first two digits.

Of course you could also simply inline that in the expression:

ng-show="book.doc.date.indexOf('01') == 0"

Even better, use ng-if instead of ng-show, or filter the array before displaying all wanted items.

Upvotes: 1

Related Questions