AngularJS:使用/ <table> </table>进行无限滚动

时间:2014-10-27 16:55:16

标签: javascript angularjs infinite-scroll nginfinitescroll

我有无限滚动工作w /一组数据正确。当我使用HTML表执行类似的任务(图像索引)时,过于频繁地调用loadMore()函数。通常,一个轻量滚动将遍历整个数据集。谷歌没有给我一个使用表格的具体例子,所以想知道我是不是搞砸了什么。

    <table>
        <span infinite-scroll="loadMore()" infinite-scroll-distance='2' infinite-scroll-disabled="load_disabled">
        <tr data-ng-repeat="row in data">
            <td data-ng-repeat="item in row">
                <div class="image_box">
                    <img data-ng-src="{{item.thumb_src}}"><br>{{item.title_eng}}
                </div>
            </td>
        </tr>
        </span>
    </table>

的Javascript。请注意,$ scope.data是我的项目数组的数组。 $ scope.data [0]将有5个项目,其中包含缩略图和一些文本。

angular.module('myApp', ['ngRoute','infinite-scroll'])
.controller("imageController",
        ['$scope',
        '$http',
        '$routeParams',
        '$rootElement',
        '$location',
        function($scope,$http,$routeParams,$rootElement,$location) {


$scope.data = new Array();
row = -1;

for ( var i = 0; i < 100; i++ ) {

    if ( i % 5 == 0  ) {
        row++;
        $scope.data[row] = new Array();
    }

    var item = [];
    item["title_eng"] = "title " + i;
    $scope.data[row].push( item );
}

console.log( "We got " + row + 1 + " rows." );

$scope.rows = new Array();
var row_ix = 0;

$scope.loadMore = function() {

    if ( !$scope.data[row_ix] || !$scope.data[row_ix].length ) {
        return;
    }

    var x = 1; // 1 at a time
    console.log( "row_ix:  " + row_ix + "." );
    for ( var i = 0; i < x; i++ ) {
        $scope.rows[row_ix] = new Array();
        $scope.rows[row_ix] = $scope.data[row_ix].slice(0);
        row_ix++;
    }
}

angular.module('infinite-scroll').value('THROTTLE_MILLISECONDS', 250);\
编辑:一段时间后回到这里。 Throttle似乎不起作用。 :(

0 个答案:

没有答案