ng-repeatの後にカスタムディレクティブdivを追加する方法

Question

私のコードでは、ng-repeatでレンダリングされたアイテムがたくさんあります。 これらのアイテムはブートストラップクラス col-md-3 を使用しています。これらのアイテムのいずれかをクリックすると詳細なパネルを見ることができる機能を追加したいと思います。

しかし、私はDOM内に1つの詳細パネルを持ち、それを動かすことでそれを達成したいと思います。達成する

<div ng-repeat="thing in thingsCtrl.things"> 
    <thing-widget class="col-md-3"></thing-widget> 
</div> 

<thing-detail ng-show="thingsCtrl.showDetail" class="col-md-12"> </thing-detail> 

万が一：

HTMLはこのようなものですか？

ありがとうございます。

Answer 1

ng-repeatの中でthing-detailを移動し、$ indexを使って追加するかどうかを試すことができます。

<div ng-repeat="thing in thingsCtrl.things"> 
    <thing-widget class="col-md-3"></thing-widget> 
    <thing-detail ng-if="$index === nth" ng-show="thingsCtrl.showDetail" class="col-md-12"> </thing-detail> 
</div>