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