AngularJS ng-repeat filter on unformatted date expression

Question

I have some JSON I pull into my Angular application. I use ng-repeat to output the JSON to the page, but I would now like to filter on a date field. I can filter on the necessary field using the ng-model query. However the data that comes from the server is converted to the specific date format in a filter in the repeater itself. Therefore using the filter box does not work as expected. I am uncertain at this point how I would convert what's entered into the ng-model text box into the required format.

Enter the time you left: <input ng-model="query.start">
<ul>
  <li ng-repeat="incident in Traffic | filter: query">
      <h3>{{incident.description}}</h3>
      <p>Start: {{incident.start | jsonDate : 'yyyy-MM-dd HH:mm'}}</p>
      <p>End: {{incident.end| jsonDate : 'yyyy-MM-dd HH:mm'}}</p>
  </li>
</ul>

What exactly is your question, and what exactly do you want to accomplish here? Examples of date data would also be helpful. — pje, Aug 01 '14 at 15:21

score 0 · Accepted Answer · edited May 23 '17 at 12:04

One option would be to use Angular UI's datepicker to provide a nice date picker user interface instead of having the user type a date manually. With that in place, your ng-model is a true JavaScript Date object instead of a string. When it changes, you can compare it against dates in your server data and filter them at the controller level. Push only those that match into a separate array, and display that array with your ng-repeat, instead of the original server-provided array.

AngularJS ng-repeat filter on unformatted date expression

1 Answers1