当按值跟踪发生变化时，如何重建ng-repeat

How to rebuild ng-repeat when track by value is changed?

本文关键字：何重建 重建 ng-repeat 跟踪 变化      更新时间：2023-09-26

我有以下ng-repeat表达式:

ng-repeat="album in albums track by (album.id + gallery.layout)"

你可以看到track by取决于专辑的id和画廊布局。当我改变画廊布局什么都没有发生-看起来ng-repeat不期望track by值改变。为了修复它，我必须添加/删除相册(因为布局改变了，所有项目都更新了)。

如何强制角更新ng-repeat ?我可以选择最后一个专辑，删除它并添加$timeout，但我不喜欢这个解决方案。

如果对象确实是基于图库的不同，一个选择是为它设置一个单独的属性。所以你的JS可能看起来像:

$scope.$watch('gallery.layout', injectGalleryLayoutIds);
function injectGalleryLayoutIds(galleryLayout){
  $scope.albums.forEach(function(album){
    album.idForGallery = album.id + galleryLayout;
  });
}

而不是track by idForGallery。

如果你想避免修改album对象，你可以使用包装器(当然，这将为每个相册使用一些额外的内存):

$scope.$watch('gallery.layout', updateGalleryAlbums);
function updateGalleryAlbums(galleryLayout){
  $scope.galleryAlbums = $scope.albums.map(function(album){
    return { album: album, id: album.id + galleryLayout };
  });
}

然而，我得到的印象是，你试图解决的问题可能更好地解决:

1)纯CSS。为父元素添加一个具有布局名称的不同类，然后根据需要尽可能详细地绘制项目。显示/隐藏项目，并通过CSS重新设计样式。

如果布局的结构差异太大，纯CSS方法是可行的，另一个选择可能是:

2)对不同的图库布局有指令或视图，在它们之间有ng-switch(或类似地注入布局)，并在它们的HTML中有ng-repeat，并且简单地track by album.id

相关文章：