谷歌圖片與angularjs和ui-bootstrap佈局

我想創建一個類似於Google圖片庫佈局的圖片庫，但我找不到任何有用的示例。我想在angularjs點擊圖片的下方或上方顯示較大的圖片。谷歌圖片與angularjs和ui-bootstrap佈局

我開始研究一個笨蛋的例子，但不知道如何做到這一點。我可以在所有圖像的頂部或所有圖像下方顯示圖像。有關如何使用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>

來源

2016-11-07 Sateesh Kumar Alli

你幾乎沒有。唯一缺少的是在轉發器內部移動圖像。

添加到您的控制器。

$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

來源

2016-11-07 14:22:34 Alok

我實現你的想法，但它是不是接近谷歌的圖像佈局的https：/ /plnkr.co/edit/IN65NEXKUDNFWIZeXDci?p=preview –

谷歌圖片與angularjs和ui-bootstrap佈局

回答

相關問題