Question

我有以下ng-repeat表达式：

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

正如您所看到的，track by取决于相册的ID和图库布局。当我更改图库布局时，没有任何反应 - 看起来ng-repeat不希望track by值发生变化。要修复它，我必须添加/删除相册（因为布局已更改，所有项目都已更新）。

如何强制角度更新ng-repeat？我可以选择上一个相册，将其删除并添加$timeout，但我不喜欢这个解决方案。

Answer 1

如果对象基于图库真的不同，一个选项是为它设置单独的属性。所以你的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

如何在按值追踪时重建ng-repeat？

1 个答案: