Problemas com o `track by $ index` com o Carrossel de interface angular
Eu criei um carrossel usando o bootstrap da interface do usuário angular. Como estou carregando tantas imagens (mais de 1.000), usei um filtro para exibir 500 fotos na paginação.
.filter('pages', function () {
return function (input, currentPage, pageSize) {
if (angular.isArray(input)) {
var start = (currentPage - 1) * pageSize;
var end = currentPage * pageSize;
return input.slice(start, end);
}
};
})
O controlador:
self.currentPage = 1;
self.itemsPerPage = 500;
self.maxSize = 10;
//imagesUrls is response.data from http call
angular.forEach(imagesUrls, function (parent) {
var date = uibDateParser.parse(parent.fileCreationTime, 'M/d/yyyy
hh:mm:ss a');
// fill our slide arrays with urls
// model update here
self.slides.push({
image: parent.fileName,
time: date,
id: parent.id
});
});
self.totalItems = self.slides.length;
E eu uso assim:
<div uib-carousel
active="$ctrl.active"
interval="$ctrl.myInterval"
no-wrap="$ctrl.noWrapSlides"
no-pause="true">
<div uib-slide ng-repeat="slide in $ctrl.slides | pages:
$ctrl.currentPage : $ctrl.itemsPerPage track by $index"
index="$index">
<img id="carousel-img" ng-src="{{slide.image}}">
<div class="carousel-caption">
<p>Index {{$index}}</p>
</div>
</div>
</div>
<div class="row">
<ul uib-pagination
total-items="$ctrl.totalItems"
items-per-page="$ctrl.itemsPerPage"
ng-model="$ctrl.currentPage"
max-size="$ctrl.maxSize"
boundary-link-numbers="true"
force-ellipses="true"
class="pagination-sm">
</ul>
</div>
Isso funciona como esperado.
Quando o carrossel é carregado pela primeira vez, o índice é 0. Quando passa para o próximo slide, o índice é 1, quando você passa para o próximo slide, o índice é 2. Quando você exibe o slide.id da imagem atual, também é 2)
O problema:
No entanto, quando você clica no segundo link de paginação, o índice não volta a zero, é iniciado no último índice em que o slide estava no carrossel.
Portanto, agora o índice é 2 e o ID do slide da imagem atual é 502.
Se você deslizar até o índice 20 e clicar no link de paginação, o índice continuará em 20. Quando você exibe o ID do slide da imagem atual, ele se torna 520.
Existe uma maneira de fazer com que o índice inicie novamente em 0 para que o slide.id seja 500 e não 502 ou 520?
Espero que minha pergunta seja clara.