javascript - AngularJS: 無限スクロール w/1セットのデータで無限スクロールが適切に機能しています。HTML テーブルを使用して同様のタスク (画像インデックス) を実行しているときに、loadMore() 関数が頻繁に呼び出されます。通常、1 回のライト スクロールでデータ セット全体が処理されます。Google はテーブルを使用した具体的な例を教えてくれませんでした。 <table> <span

Question

1セットのデータで無限スクロールが適切に機能しています。HTML テーブルを使用して同様のタスク (画像インデックス) を実行しているときに、loadMore() 関数が頻繁に呼び出されます。通常、1 回のライト スクロールでデータ セット全体が処理されます。Google はテーブルを使用した具体的な例を教えてくれませんでした。

    <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);\

編集：しばらくしてからこれに戻ります。スロットルが機能していないようです。:(