how to filter dates with angular?

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

do you want a GROUP BY month or WHERE row.date = @month? show us sample data current and expected result. Please read How-to-Ask And here is a great place to START to learn how improve your question quality and get better answers. — Juan Carlos Oropeza
– Juan Carlos Oropeza, Commented Aug 18, 2016 at 14:00
@JuanCarlosOropeza thanks for the tips. I want to select a month and to get all data from that specific month — tanyaa
– tanyaa, Commented Aug 18, 2016 at 14:02
Possible duplicate of How to filter by month in AngularJs with filter — Juan Carlos Oropeza
– Juan Carlos Oropeza, Commented Aug 18, 2016 at 14:04

Dan M. CISSOKHO · Accepted Answer · 2016-08-19 08:34:15Z

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; 

      })

edited Aug 19, 2016 at 8:34

answered Aug 18, 2016 at 13:56

Dan M. CISSOKHO

1,0851 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

tanyaa Over a year ago

it doesn't work:( the table is being shown without me picking a date.

Dan M. CISSOKHO Over a year ago

could you add the formatedDate() function to see what could be wrong ?

tanyaa Over a year ago

I added - there are no errors. the table I being shown before I pick some date

tanyaa Over a year ago

can we continue with chat?

tanyaa Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

how to filter dates with angular?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related