how to filter dates with angular? - php

Question

I'm building a project with angular and php. I have a "select" option where I choose specific date and it shows me all details in a table, and counting on several things and everything works great. but when I pick a date, i want it to show all results by specific month and not by specific date(for example --> now i choose date like this - '2016-4-15' it will give me all information specific to this date and not by month like i need). can someone please help? in my database the 'date' value is date.
Php query :
$query=" SELECT `description` ,`total_price` , `name`,`supplier_id`,`date` FROM `suppliers`,`expenses`
where `supplier_id` = `refer_supplier_id` ";
Html:
<select ng-model="supplierExpenses.selectedOption" ng-change="setTotals(supplierExpenses)"
ng-options = "item.date for item in supplierExpenses |
unique:'date'" >
<option value="">בחר תאריך</option>
</select>
<div class="table-responsive">
<table class="customer-list table table-striped" >
<thead>
<tr >
<th class="Column-Header">מספר ספק</th>
<th class="Column-Header">שם ספק</th>
<th class="Column-Header">כמות מוצרים שנקנו</th>
<th class="Column-Header">מחיר הוצאה</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in supplierExpenses" ng-if = "item.date == supplierExpenses.selectedOption.date"
>
<td>{{item.supplier_id}}</td>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.total_price}}</td>
</tr>
</tbody>
<tfoot>
<tr class="bg-warning">
<td><font size="6">סה"כ הוצאות</font></td>
<td><font size="6">{{totalExpenses}}</font></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
Controller:
"use strict";
angular.module('dataSystem').controller('supplierExpensesCtrl', function ($scope, $route, $location, $http) {
$http({method:'GET', url:'api/reports-tab/supplier-expenses-by-mounth.php/'})
.then(function(response) {
var arr = JSON.parse(JSON.parse(response.data));
$scope.supplierExpenses = arr;
})
// This will log you the error code and trace, if there is an error.
.catch(function(err) {
console.log('err', err)
});
$scope.totalExpenses = 0;
$scope.setTotals = function(totalItem){
$scope.totalExpenses = 0;
for(var item =0; item< totalItem.length; item++){
// console.log(totalItem[item]);
if (totalItem[item] && (totalItem[item].date == $scope.supplierExpenses.selectedOption.date)){
$scope.totalExpenses += parseInt(totalItem[item].total_price);
}
}
}
});

Answer 1

Hi glad you succeed with the total ^^ I edit my answer with the working solution for the date issue
$http({method:'GET', url:'api/reports-tab/supplier-expenses-by-mounth.php/'})
.then(function(response) {
var arr = JSON.parse(JSON.parse(response.data)), month, date;
for(var i = 0; i< arr.length; i++){
date = new Date(arr[i].date); //we convert the string into javascript date
month = date.getMonth()+1;
if(month.length === 1){
month = '0'+month; //we add a 0 if needed
}
var year = date.getFullYear();
arr[i].date = month+'/'+year; //we use only the month and year
}
$scope.supplierExpenses = arr;
})