2017-05-27 72 views
0

我使用角度ui引導程序創建了一個傳送帶。 json如下。使用日期通道過濾角度ui引導程序

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

控制器代碼。

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

該模板。

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

中,可以從2017年5月26日下午1時32分00秒顯示圖像 2017年5月26日下午1時36分〇〇秒的方式如何過濾?

請幫忙!!!

回答

1

這將通過時間升序排序的數組。

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

@ T.Shah ....我其實這......謝謝!!!!!!!!!!! –

1

對於日期過濾您需要創建一個過濾器:

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

並使用此過濾器NG-重複這樣的:

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

謝謝....完美的作品 –

+0

請標記爲已接受的答案並投票。 –