How to filter by month in AngularJs with filter

Question

I want to filter data using AngularJs filter in a ng-repeat.

Here is my ng-repeat snippet

<tr ng-repeat="finance in finances | filter:trierParDate ">
    <td>{{finance.created_at}}</td>
    <td>{{finance.prix | numeraljs:'argent'}}</td>
    <td>{{finance.grandtotal | numeraljs:'argent'}}</td>
</tr>

Here is my buttons to filter by months:

<div ng-click="trierParDate = {'created_at': '2015-03-12 22:43:07'}">Janvier</div>
<div ng-click="trierParDate = {'created_at': '2015-03-12 22:43:07'}">Février</div>
etc...

Actually, these "buttons" returns a single entry as I just wanted to test it. Now I wonder how to filter by month.

I would like that translates to: ng-click = {if the created_at property contains 03 at position 5 to 7 (month data position), then show the entries.}

Nicholas Hirras · Accepted Answer · 2015-03-24 20:18:14Z

1

You can create a filter function, and filter results based on a selected / desired month. Here's a working example:

http://plnkr.co/edit/OTTAqykqGsJFrFyJYOjD?p=preview

html:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    Show results for 
    <select ng-model = "selectedMonth">
      <option></option>
      <option value="0">Jan</option>  
      <option value="1">Feb</option>  
      <option value="2">Mar</option>  
      <option value="3">Apr</option>  
      <option value="4">May</option>  
      <option value="5">Jun</option>  
      <option value="6">Jul</option>  
      <option value="7">Aug</option>  
      <option value="8">Sep</option>  
      <option value="9">Oct</option>  
      <option value="10">Nov</option>  
      <option value="11">Dec</option>  
    </select>

    <ul>
      <li ng-repeat="a in appointments | filter: selectedMonthFilter">id: {{a.id}}, label: {{a.label}}, created: {{a.created}}</li>
    </ul>

  </body>

</html>

javascript:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.appointments = [];

  $scope.selectedMonth = "";

  $scope.selectedMonthFilter = function(element) {
    if(!$scope.selectedMonth) return true;
    return element.created.getMonth() == $scope.selectedMonth;
  }

  function randomDate(start, end) {
      return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()))
  }  

  for(var i=0; i<1000; i++) {
    $scope.appointments.push({id: i, label: "Item number " + i, created: randomDate(new Date(2014, 0, 1), new Date())});
  }

});

answered Mar 24, 2015 at 20:18

Nicholas Hirras

2,5962 gold badges23 silver badges28 bronze badges

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

2 Comments

Lucien Dubois Over a year ago

This snippet works. I try to figure out how to adapt it to my code. I'm working on it right now.

Chihuahua Enthusiast Over a year ago

Note that the filtered date must be a Date object for this to work - so if you're filtering data from an API, convert it to a Date object.

Collectives™ on Stack Overflow

How to filter by month in AngularJs with filter

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related