перемещаться по элементам массива для создания таблицы ранжирования

Question

У меня есть таблица, в которой я пытаюсь показать на складе предметы для продажи, 100 элементов таблицы извлекаются через Ajax во время выполнения, я хочу показывать только 20 элементов каждые 3 секунды, просматривая элементы вперед следующим образом:

Второй 1

• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4..

Через 3 секунды

• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5 ..

Через 3 секунды

• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6 ..

Через 3 секунды

• Элемент 4
• Элемент 5
• Пункт 6
• Пункт 7 ..

То, что я сделал до сих пор:

$('.market-items-count').html(marketItems.length);

            setTimeout(function(){ 

                $('.market-data tr').hide();
                setInterval(function(){         
                    $('.market-data tr').each(function(index, element){             
                        if(index == 0)
                        {
                            $(this).remove();
                        }

                        if(index < 20 )
                        {
                            $(this).show('slow');
                        }
                    }); 
                }, 3000); 
            }, 3000);

Я ищу лучший способ, пожалуйстас AngularJS.

     app.controller("marketController", ['$scope', '$http', '$filter', '$rootScope', function ($scope, $http, $filter, $rootScope) {

            $scope.marketItems = [];
            $http.get(window.APPURL + '/api/market').then(function(response) {
                $scope.marketItems = response.data;
            });
.
.
.

Answer 1

Наконец-то мне удалось сделать это простое решение (например: показывать 3 элемента за раз):

var marketItems = ["item 1", "item 2", "item 3", "item 4", "item 5", "item 6", "item 7","item 8", "item 9", "item 10","item 11", "item 12"];

var data = [];      
var i = 0;

setInterval(function(){ 
    data = marketItems.slice(i, 3 + i + 1);
    i++;
    console.log(data);
}, 3000);

Спасибо.

Answer 2

Вы можете использовать это limitTo в ng-repeat, а затем из js установить $interval, который через каждые 3 секунды будет отображать следующие элементы: HTML:

<table>
  <thead>
    <tr>
      <th>name</th>
    </tr>
  </thead>
  <tbody ng-repeat="d in data | limitTo:totalDisplayed">
    <tr>
      <td>
        {{d.item}}
      </td>
    </tr>
  </tbody>
</table>

JS:

app.controller('MainCtrl', function($scope, $http, $interval) {


  $http({
            method: 'GET',
            url: 'templates.json',
        })
            .then(function successCallback(data) {
                $scope.data = data.data;
                console.log($scope.data)

            }, function errorCallback(response) {
                console.log(response);
                console.log('error');
            });
 $scope.totalDisplayed = 3;

 $interval(function(){
            $scope.totalDisplayed += 1;
        }, 3000);
});

Плункер: http://plnkr.co/edit/20ZCDdO7WGBgkHu77rrI?p=preview