angularjsとui-bootstrapのGoogle画像レイアウト

Question

私はGoogle画像ギャラリーのレイアウトと似た画像ギャラリーを作りたいと思いますが、私はアプローチする有用な例が見つかりませんでした。 angularjsを使用してクリックした画像のすぐ下または上に大きな画像を表示したいと思います。

私は大胆な例で作業を開始しましたが、これを達成する方法はありません。私は、すべての画像の上部またはすべての画像の下に画像を表示することができました。 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更新しました：私はあなたのアイデアを実装しましたが、それは、Googleのイメージに近くない https://plnkr.co/edit/IN65NEXKUDNFWIZeXDci?p=preview