Filtering angular ui bootstrap using a date rane

Question

I have created a carousel using angular ui bootstrap. The json is as below.

{
  "directoryName": 
 "http://localhost:8012/safcom/192.168.1.31_001215302a48/2017/01/pic/",
  "imageDetails": [
    {
      "fileName": "1229464294958932.jpg",
      "fileCreationTime": "5/26/2017 1:30:00 PM"
    },
    {
      "fileName": "1229494294957556.jpg",
      "fileCreationTime": "5/26/2017 1:31:00 PM"
    },
    {
      "fileName": "1234464294963514.jpg",
      "fileCreationTime": "5/26/2017 1:32:00 PM"
    },
    {
      "fileName": "1242124294959420.jpg",
      "fileCreationTime": "5/26/2017 1:36:00 PM"
    },
    {
      "fileName": "1242164294964790.jpg",
      "fileCreationTime": "5/26/2017 1:36:00 PM"
    }
  ]
}

The controller code.

self.myInterval = 2000;
self.noWrapSlides = false;
self.active = 0;
self.slides = [];
var currIndex = 0;

self.imagesUrls = response;(the json)
angular.forEach(self.imagesUrls, function (parent) {
    angular.forEach(parent.imageDetails, function (child) {
        var date = uibDateParser.parse(
             child.fileCreationTime, 
             'M/d/yyyy h:mm:ss a');
        self.slides.push({
        image: parent.directoryName + child.fileName,
        time: date,
        id: currIndex++
      });
   });
});

The template.

 <div 
    uib-carousel active="$ctrl.active" 
    interval="$ctrl.myInterval" 
    no-wrap="$ctrl.noWrapSlides">
       <div uib-slide 
           ng-repeat="slide in $ctrl.slides track by $index" index="$index">
                 <img ng-src="{{slide.image}}" style="margin:auto;">
       </div>
       <div>
          {{image.Id}}
       </div>
 </div>

How can filter in a way that can display images from 5/26/2017 1:32:00 PM to 5/26/2017 1:36:00 PM?

Please help!!!

T.Shah · Accepted Answer · 2017-05-27 11:27:18Z

1

This will sort the array in ascending order by time.

                self.imagesUrls = response.imageDetails;
                //(the json)

                    self.imagesUrls.sort(function(a,b){
                    // Turn your strings into dates, and then subtract them
                    // to get a value that is either negative, positive, or zero.
                    return new Date(a.fileCreationTime) - new Date(b.fileCreationTime);
                  });                   

                console.log(self.imagesUrls);

answered May 27, 2017 at 11:27

T.Shah

2,7661 gold badge17 silver badges14 bronze badges

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

Comments

Prateek Pandey · Accepted Answer · 2017-05-27 11:11:32Z

1

For date filtering you need to create a filter:

app.filter("dateFilter", function () {
    return function (slides, fromDate, toDate) {
        var filteredSlides = [];
        angular.forEach(slides, function (slide) {
            if (slide.time !== undefined && slide.time >= fromDate && slide.time <= toDate) {
                filteredSlides.push(slide);
            }
        });
        return filteredSlides;
    }
});

and use this filter in ng-repeat like this:

<div uib-slide ng-repeat="slide in $ctrl.slides | dateFilter: fromDate : toDate track by $index" index="$index">
     <img ng-src="{{slide.image}}" style="margin:auto;">
</div>

answered May 27, 2017 at 11:11

Prateek Pandey

8636 silver badges20 bronze badges

Collectives™ on Stack Overflow

Filtering angular ui bootstrap using a date rane

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related