谷歌圖像布局與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