プログレッシブスクロールwith angularjs

Question

私はデータベースの魔女に1000の製品が含まれています。私は一度に10の製品を表示するリストを持っています。このグリッドはスクロール可能です。私は製品10を10でロードしたいと思っています。 これをanglejsで行う最良の方法は何ですか？最短のコードが必要なメソッドを探しています。 ありがとう

Answer 1

このコンセプトはページネーションと呼ばれ、時間をかけずにこれを達成したい場合は、既に使用可能なモジュールを選択する必要があります。

私はInfinite Scrollを使用しました。これは非常に使いやすく、すぐに物事を実装するのに役立ちます。

Answer 2

"無限スクロール"と呼ばれるライブラリを探しています。それはあなたがスクロールを検出するとの末尾にある

<div ng-app="MyApp"> 
    <div ng-controller="MainController"> 
    <ul tagged-infinite-scroll="getMore()"> 
     <li ng-repeat="item in items"> 
     {{ item.title }} 
     </li> 
    </ul> 
    </div> 
</div> 

：あなたは、コントローラにこのコード入れ、ここで、このアプリhttps://github.com/ifwe/infinite-scroll

見つけることができます：

var app = angular.module('MyApp', ['tagged.directives.infiniteScroll']); 
app.controller('MainController', ['$scope', '$http', function($scope, $http) { 
    $scope.page = 1; 
    $scope.items = []; 
    $scope.fetching = false; 

    // Fetch more items 
    $scope.getMore = function() { 
    $scope.page++; 
    $scope.fetching = true; 
    $http.get('/my/endpoint', { page : $scope.page }).then(function(items) { 
     $scope.fetching = false; 
     // Append the items to the list 
     $scope.items = $scope.items.concat(items); 
    }); 
    }; 
}]); 

をそして、これはあなたのビューでありますそれはgetMoreと呼ばれ、新しいアイテムを読み込む関数です。ng-repeatエンドポイントの制限に追加し、毎回同じデータではなく残りのデータをロードするようにオフセットすることを忘れないでください。