Filtern von eckigen Bootstrap mit einem Datum rane

Question

Ich habe ein Karussell mit eckigen ui Bootstrap erstellt. Der JSON ist wie folgt.

{ 
    "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" 
    } 
    ] 
} 

Der Controllercode.

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

Die Vorlage.

<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> 

Wie kann in einer Art und Weise filtern, die Bilder von 2017.05.26 13.32.00 bis 2017.05.26 13.36.00 anzeigen kann?

Bitte helfen Sie !!!

Answer 1

Dies wird das Array aufsteigend nach Zeit sortiert werden.

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

Answer 2

Für Datum Filterung benötigen Sie einen Filter erstellen:

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

und verwenden diesen Filter in ng-repeat wie folgt aus:

<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>