带有angularjs和ui引导的Google图像布局

Question

我想做一个图片库，这是类似谷歌图片库布局，但我找不到任何有用的例子来接近。我想显示更大的图像，就在下面或上方的图像，是点击使用angularjs。

我开始做一个柱塞例子，但不知道如何实现这个目标。我可以在所有图像的顶部或下面显示图像。任何关于如何使用angularjs和ui-bootstrap实现这一点的想法。提前谢谢。

柱塞连杆：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>

我更新了你的柱塞：https://plnkr.co/edit/IN65NEXKUDNFWIZeXDci?p=preview