How to make ng-repeat item goTop/goBottom with animation?

Question

I try to use Angular to animate something like the demo below. When clicking the button, the item should go up, go down, go top or go bottom. 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>

The animation of "up" and "down" is ok, but when "top" or "bottom" are clicked, the animation is wrong.

How can I move the clicked item when I click "goTop" and "goBottom"?

Answer 1

Instead of setting the element that has to go to top/bottom, you should just move it one element after the other. Have a look at the plunkr .

I used recursion and called the same scope.goTop function again after a short timeout ( $timeout to rerender the HTML) of 520ms until the top of the list is reached. Therefore, you can just call scope.goUp that does the moving job for you.