アニメーションでng-repeatアイテムgoTop/goBottomを作成する方法は？

Question

Angularを使って、以下のデモのようなものをアニメーション化しようとしています。 ボタンをクリックすると、項目が上がる、下に行く、上に行く、または下に移動する必要があります。 http://plnkr.co/edit/PbuhAYD2r1TXBcZM8EAl?p=preview、

<div ng-controller="animateCtrl"> 
<div class="container"> 
    <ul class="ulFade" id="autoscroll"> 
    <li ng-repeat="li in lis" class="fade show"> 
     {{li.name}} 
     <button ng-click="removeItem($index)">x</button> 
     <button ng-click="upItem($index)" ng-show="$index>0">up</button> 
     <button ng-click="downItem($index)" ng-show="$index<lis.length-1">down</button> 
     <button ng-click="goTop($index)">Top</button> 
     <button ng-click="goBottom($index)">Bottom</button> 
    </li> 
    <div> 
     <input type="text" ng-model="li.name"> 
     <button ng-click="add()">add</button> 
    </div> 
    </ul> 
</div> 

「アップ」とのアニメーション

「ダウン」OKですが、「下」、「トップ」またはをクリックすると、アニメーションが間違っています。

「goTop」と「goBottom」をクリックすると、クリックしたアイテムをどのように移動できますか？

Answer 1

top/bottomに移動する必要がある要素を設定する代わりに、もう一方の要素を移動するだけで済みます。 plunkrをご覧ください。

再帰を使用して、リストの先頭に到達するまで520msの短いタイムアウト（HTMLを再レンダリングするために$timeout）を実行した後、同じscope.goTop関数を再度呼び出しました。したがって、移動ジョブを実行するscope.goUpに電話することができます。