Question

我有一个要在其中显示要出售的库存物品的表，在运行时通过Ajax提取了100个表项目，我希望每3秒仅显示20个项目，像这样循环遍历这些项目：

第二个

项目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

您可以在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

Answer 2

最后，我设法提出了一个简单的解决方案（例如：一次显示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);

谢谢。

遍历数组项以生成排名表

2 个答案: