谷歌图像布局与angularjs和ui-bootstrap

Question

我想创建一个类似于谷歌图片库布局的图库，但我找不到任何有用的示例。 我想在使用angularjs点击的图像正下方或上方显示较大的图像。

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

Plunker链接： 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

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

将此添加到您的控制器。

$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