javascript - 使用 angularjs 和 ui-bootstrap 的谷歌图像布局

Question

我想制作一个类似于 Google 图片库布局的图片库，但我找不到任何有用的示例来处理。我想在使用 angularjs 单击的图像正下方或上方显示较大的图像。

我开始研究一个 plunker 示例，但不知道如何实现它。我可以将图像显示在所有图像的顶部或所有图像的下方。关于如何使用 angularjs 和 ui-bootstrap 实现此目的的任何想法。提前致谢。

Plunker Link : https://plnkr.co/edit/IN65NEXKUDNFWIZeXDci?p=preview

查看:

<div ng-controller="CollapseDemoCtrl">
    <div ng-repeat="image in images track by $index">
      <img src="{{image}}" ng-click="collapse=!collapse; setImage(image)" style="height:100px;width:100px;float:left;padding:20px;cursor:pointer">
    </div>
    <div>
      <img uib-collapse="collapse" src="{{img}}"style="height:500px;width:500px;padding:20px">
    </div>
</div>

Answer 1

你快到了。唯一缺少的是在中继器内移动图像。

将此添加到您的 Controller 。

$scope.setImage = function(index){
  $scope.visibleIndex = index;
}

这是您的标记:

<div ng-show="visibleIndex == $index"><br />
  <img src="{{image}}" style="height:500px;width:500px;padding:20px">
</div>

我已经更新了你的 plunker: https://plnkr.co/edit/IN65NEXKUDNFWIZeXDci?p=preview