Angular date filter on ng-click

2019-09-15 19:59发布

I want to filter the records by the reply time monthly. If I click a date on the left menu. The table should display the records only in that specific month. I have a search filter also. Screenshot of the layout

The current reviews date are displayed on the left which serve as filter on ng-click. Is it possible for the dates in the left to be dynamic base on the reply time. the reply time is in the third column of the tabl which is a string date from JSON array.

My Script:

<script>
(function() {
'use strict';

angular
.module('myApp', [])
.constant('STATUS', {
  0: 'Stable',
   1: 'Normal',
  2: 'Serious'
})
.controller('historyCtrl', historyCtrl);

 historyCtrl.$inject = ['$scope', 'STATUS'];

 function historyCtrl($scope, STATUS) {
 $scope.sortType = 'sportorderreply.replyTime'; // set the default sort type
 $scope.sortReverse  = true;  // set the default sort order
 $scope.sortId  = false;
 $scope.sortRD  = false;
 $scope.sortRT  = false;
 $scope.sortStatus  = false;
 $scope.orderHistory = [{
   "orderID":"123",
   "purchaseTime":1437536718345,
   "sportorderreply":{
        "memberId":"123123",
         "orderStatus":1,
         "replyTime":"2016/06/04 08:30:40"
    }
 },
{
   "orderID":"123",
   "purchaseTime": 1437536718345,
   "sportorderreply":{
         "memberId":"123123",
         "orderStatus":2,
         "replyTime":"2016/08/04 08:30:40"
    }
 },
{
   "orderID":"123",
   "purchaseTime": 1437536718345,
   "sportorderreply":{
         "memberId":"123123",
         "orderStatus":0,
         "replyTime":"2016/07/04 08:30:40"
    }
 },
 ];
 $scope.currentPage = 1;

 $scope.currentYear = new Date().getFullYear();
   $scope.search = function (order){
        if ($scope.searchReview === undefined) return true;
          if (order.sportorderreply.orderStatus.indexOf($scope.searchReview)!=-1 || order.purchaseTime.indexOf($scope.searchReview)!=-1 || order.sportorderreply.replyTime.indexOf($scope.searchReview)!=-1) {
        return true;
    }
    return false;
  };
function parseProperties() {
  $scope.orderHistory.map(function(order) {

    order.sportorderreply.orderStatus = STATUS[order.sportorderreply.orderStatus];

var date = new Date(order.purchaseTime);
var d = date.getDate();
var m = date.getMonth() + 1;
var y = date.getFullYear();
var dateString =  y + '/' + (m <= 9 ? '0' + m : m) + '/' + (d <= 9 ? '0' + d : d);
order.purchaseTime = dateString;

var newRT = new Date(order.sportorderreply.replyTime);
order.sportorderreply.replyTime = newRT;

return order;
  });
}

parseProperties();
}})();
</script>

HTML:

<div id="accordion">
            <h4 class="accordion-toggle activeAccordion"><p>Current reviews (120)</p></h4>
            <div class="accordion-content default">
                <ul  ng-init="currentYear = {{currentYear}}">
                    <li ng-click="monthFilter={'filterMonth':'December'};yearFilter={'filterYear': currentYear} "> Dec. (50)</li>
                    <li ng-click="monthFilter={'filterMonth':'November'};yearFilter={'filterYear': currentYear} "> Nov. (50)</li>
                    <li ng-click="monthFilter={'filterMonth':'October'};yearFilter={'filterYear': currentYear} "> Oct. (50)</li>
                    <li ng-click="monthFilter={'filterMonth':'September'};yearFilter={'filterYear': currentYear} "> Sep. (50)</li>
                    <li ng-click="monthFilter={'filterMonth':'August'};yearFilter={'filterYear': currentYear} "> Aug. (50)</li>
                    <li ng-click="monthFilter={'filterMonth':'July'};yearFilter={'filterYear':currentYear}">Jul. (54)</li>
                    <li ng-click="monthFilter={'filterMonth':'June'};yearFilter={'filterYear':currentYear}">Jun. (30)</li>
                    <li ng-click="monthFilter={'filterMonth':'May'};yearFilter={'filterYear':currentYear}">May. (34)</li>
                    <li ng-click="monthFilter={'filterMonth':'April'};yearFilter={'filterYear':currentYear}">Apr. (20)</li>
                    <li ng-click="monthFilter={'filterMonth':'March'};yearFilter={'filterYear':currentYear}">Mar. (58)</li>
                    <li ng-click="monthFilter={'filterMonth':'February'};yearFilter={'filterYear':currentYear}">Feb. (59)</li>
                    <li ng-click="monthFilter={'filterMonth':'January'};yearFilter={'filterYear':currentYear}">Jan. (56)</li>
                </ul>
            </div>
            <h4 class="accordion-toggle secondAcc"><p>2015 reviews (650)</p></h4>
            <div class="accordion-content secondAcc">
                <ul ng-init="lastYear = {{lastYear}}">
                    <li ng-click="monthFilter={'filterMonth':'December'};yearFilter={'filterYear': lastYear} "> Dec. (50)</li>
                    <li ng-click="monthFilter={'filterMonth':'November'};yearFilter={'filterYear': lastYear} "> Nov. (50)</li>
                    <li ng-click="monthFilter={'filterMonth':'October'};yearFilter={'filterYear': lastYear} "> Oct. (50)</li>
                    <li ng-click="monthFilter={'filterMonth':'September'};yearFilter={'filterYear': lastYear} "> Sep. (50)</li>
                    <li ng-click="monthFilter={'filterMonth':'August'};yearFilter={'filterYear': lastYear} "> Aug. (50)</li>
                    <li ng-click="monthFilter={'filterMonth':'July'};yearFilter={'filterYear':lastYear}">Jul. (54)</li>
                    <li ng-click="monthFilter={'filterMonth':'June'};yearFilter={'filterYear':lastYear}">Jun. (30)</li>
                    <li ng-click="monthFilter={'filterMonth':'May'};yearFilter={'filterYear':lastYear}">May. (34)</li>
                    <li ng-click="monthFilter={'filterMonth':'April'};yearFilter={'filterYear':lastYear}">Apr. (20)</li>
                    <li ng-click="monthFilter={'filterMonth':'March'};yearFilter={'filterYear':lastYear}">Mar. (58)</li>
                    <li ng-click="monthFilter={'filterMonth':'February'};yearFilter={'filterYear':lastYear}">Feb. (59)</li>
                    <li ng-click="monthFilter={'filterMonth':'January'};yearFilter={'filterYear':lastYear}">Jan. (56)</li>
                </ul>
            </div>
        </div>
<body>

<div id="table-div-id-history" ng-app="myApp" ng-controller="historyCtrl">
<input type="text" id="livefilter-input" class="searchHistory" placeholder="Keyword" ng-model="searchReview">
        <div class="divs" ng-repeat="order in orderHistory|orderBy:sortType:sortReverse| filter:search | filter:yearFilter | filter:monthFilter  track by $index" >
            <div >
                <ul class="historyTableData">
                    <li><p class="table-data1-h">{{$index+1}}</li>
                    <li><p class="table-data2-h" ng-bind="order.purchaseTime">  </p></li>
                    <li><p class="table-data3-h">{{ order.sportorderreply.replyTime | date: 'yyyy/MM/dd, HH:mm'}}</p></li>
                    <li><p class="table-data4-h">XDCFG0006</p></li>
                    <li><p  class="table-data5-h historyStatus" ng-bind="order.sportorderreply.orderStatus"></p></li>
                    <!--<li></li>-->
                </ul>
            </div>
        </div>
    </div>

0条回答
登录 后发表回答