使用Angular UI Carousel进行`跟踪$ index'的问题

Question

当使用分页时,索引跟踪的$ index不会从零开始

我用角度ui bootsrap创建了一个旋转木马.由于我加载了如此多的图像(超过1,000),我使用过滤器在分页中显示500张图片.

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

控制器:

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;

我这样使用它:

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

这按预期工作.

当首次加载轮播时,索引为0.当它移动到下一张幻灯片时索引为1,当你移动到下一张幻灯片时,索引是2.当你显示当前图像的slide.id时,它也是2.

问题:

但是,当您单击第二个分页链接时,索引不会返回到零,它从幻灯片在轮播中的最后一个索引处开始.

所以现在索引是2,当前图像的幻灯片ID是502.

如果滑动到索引20,并且单击分页链接,则索引仍为20.当您显示当前图像的幻灯片ID时,它将变为520.

有没有办法让索引再次从0开始,所以slide.id是500而不是502或520？

我希望我的问题很明确.

Answer 1

避免track by $index使用唯一的属性标识符。当使用所有唯一的对象时（如本例），最好让ng-repeat使用它自己的跟踪而不是覆盖track by $index.

\n

 <div uib-slide ng-repeat="slide in $ctrl.slides | pages: \n          $ctrl.currentPage : $ctrl.itemsPerPage track by  \xcc\xb6$\xcc\xb6i\xcc\xb6n\xcc\xb6d\xcc\xb6e\xcc\xb6x\xcc\xb6 slide.id" \n      index="$index">\n     <img id="{{slide.id}}" ng-src="{{slide.image}}">\n     <div class="carousel-caption">\n         <p>Index {{ \xcc\xb6$\xcc\xb6i\xcc\xb6n\xcc\xb6d\xcc\xb6e\xcc\xb6x\xcc\xb6 slide.id}}</p>\n     </div>\n </div>\n

\n

来自文档：

\n

\n

\n

如果您正在使用具有唯一标识符属性的对象，则应通过此标识符而不是对象实例进行跟踪。如果您稍后重新加载数据，ngRepeat则不必为已渲染的项目重建 DOM 元素，即使集合中的 JavaScript 对象已被新对象替换。对于大型集合，这可以显着提高渲染性能。

\n

\n

\xe2\x80\x94 AngularJS ng-repeat 指令 API 参考 - 跟踪

\n

\n

演示版

\n

\r\n

\r\n

 <div uib-slide ng-repeat="slide in $ctrl.slides | pages: \n          $ctrl.currentPage : $ctrl.itemsPerPage track by  \xcc\xb6$\xcc\xb6i\xcc\xb6n\xcc\xb6d\xcc\xb6e\xcc\xb6x\xcc\xb6 slide.id" \n      index="$index">\n     <img id="{{slide.id}}" ng-src="{{slide.image}}">\n     <div class="carousel-caption">\n         <p>Index {{ \xcc\xb6$\xcc\xb6i\xcc\xb6n\xcc\xb6d\xcc\xb6e\xcc\xb6x\xcc\xb6 slide.id}}</p>\n     </div>\n </div>\n

\r\n

angular.module("app",[\'ngAnimate\', \'ngSanitize\', \'ui.bootstrap\'])\n.controller("ctrl", function(uibDateParser) {\n  var self = this;\nself.currentPage = 1;\nself.itemsPerPage = 10;\nself.maxSize = 10;\n\nvar url = \'//unsplash.it/200/100\';\nvar imagesUrls = [];\nfor (let i=0; i<40; i++) {\n  var slide = {\n    fileName: url+"?image="+(1000+i),\n    id: \'id\'+(0+i+100),\n    fileCreationTime: new Date()\n  }\n  imagesUrls.push(slide); \n}\nself.slides = [];\n\n//imagesUrls is response.data from http call\nangular.forEach(imagesUrls, function (parent) {\n    var date = uibDateParser.parse(parent.fileCreationTime,\n        \'M/d/yyyy hh:mm:ss a\');\n    // fill our slide arrays with urls\n    // model update here\n    self.slides.push({\n        image: parent.fileName,\n        time: date,\n        id: parent.id\n    });      \n});\n//console.log(self.slides);\nself.totalItems = self.slides.length;\n})\n.filter(\'pages\', function () {\n    return function (input, currentPage, pageSize) {\n        if (angular.isArray(input)) {\n            var start = (currentPage - 1) * pageSize;\n            var end = currentPage * pageSize;\n            return input.slice(start, end);\n        }\n    };\n})

\r\n

\r\n

\r\n

\n