angularjs – 使用Angular UI Carousel进行`track by $index`的

发布时间：2020-12-17 07:51:21 所属栏目：安全来源：网络整理

导读：当使用分页时,索引跟踪的$index不会从零开始我用角度ui bootsrap创建了一个旋转木马. 由于我加载了这么多图像(超过1,000),我使用过滤器在分页中显示500张图片. .filter('pages',function () { return function (input,currentPage,pageSize) { if (angular.

当使用分页时,索引跟踪的$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？

我希望我的问题很清楚.

当有唯一的属性标识符可以使用时,避免使用$index跟踪.使用全部唯一的对象(如本例所示)时,最好让ng-repeat使用自己的跟踪,而不是使用$index覆盖track.

<div uib-slide ng-repeat="slide in $ctrl.slides | pages: 
          $ctrl.currentPage : $ctrl.itemsPerPage track by  ?$?i?n?d?e?x? slide.id" 
      index="$index">
     <img id="{{slide.id}}" ng-src="{{slide.image}}">
     <div class="carousel-caption">
         <p>Index {{ ?$?i?n?d?e?x? slide.id}}</p>
     </div>
 </div>

来自Docs：

If you are working with objects that have a unique identifier property,you should track by this identifier instead of the object instance. Should you reload your data later,ngRepeat will not have to rebuild the DOM elements for items it has already rendered,even if the JavaScript objects in the collection have been substituted for new ones. For large collections,this significantly improves rendering performance.

— AngularJS ng-repeat Directive API Reference – Tracking

The DEMO

angular.module("app",['ngAnimate','ngSanitize','ui.bootstrap'])
.controller("ctrl",function(uibDateParser) {
  var self = this;
self.currentPage = 1;
self.itemsPerPage = 10;
self.maxSize = 10;

var url = '//unsplash.it/200/100';
var imagesUrls = [];
for (let i=0; i<40; i++) {
  var slide = {
    fileName: url+"?image="+(1000+i),id: 'id'+(0+i+100),fileCreationTime: new Date()
  }
  imagesUrls.push(slide); 
}
self.slides = [];

//imagesUrls is response.data from http call
angular.forEach(imagesUrls,'M/d/yyyy hh:mm:ss a');
    // fill our slide arrays with urls
    // model update here
    self.slides.push({
        image: parent.fileName,id: parent.id
    });      
});
//console.log(self.slides);
self.totalItems = self.slides.length;
})
.filter('pages',end);
        }
    };
})

<script src="//unpkg.com/angular/angular.js"></script>
    <script src="//unpkg.com/angular-animate/angular-animate.js"></script>
    <script src="//unpkg.com/angular-sanitize/angular-sanitize.js"></script>
    <script src="//unpkg.com/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>    
    <link href="//unpkg.com/bootstrap/dist/css/bootstrap.css" rel="stylesheet">

  <body ng-app="app" ng-controller="ctrl as $ctrl">
    <div class="container" 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 slide.id" 
          index="$index">
         <img id="{{slide.id}}" ng-src="{{slide.image}}">
         <div class="carousel-caption">
             <p>Index {{slide.id}}</p>
         </div>
     </div>
 </div>

<div class="row container">
    <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>
  </body>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!