简体   繁体   English

angular.js每月过滤

[英]angular.js filter by month

I am trying to make a filter that will just display json entries for a certain month, January. 我正在尝试制作一个仅显示特定月份(一月)的json条目的过滤器。 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. 我尝试为Jan和Feb设置变量,然后将输入设置为大于Jan的第一个日期,并小于Feb的第一个日期,但这没有用。 Any help would be greatly appreciated. 任何帮助将不胜感激。

Here is my html: 这是我的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: 和我的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. 这也是我的项目的全部内容

The easiest way to make your January filter work is the following: 使January过滤器工作的最简单方法是:

.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. 更好的是,使用ng-if而不是ng-show ,或者在显示所有想要的项目之前过滤数组。

you should use filter in your filter expression 您应该在过滤器表达式中使用filter

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

and

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM