私はデータベースの魔女に1000の製品が含まれています。私は一度に10の製品を表示するリストを持っています。このグリッドはスクロール可能です。私は製品10を10でロードしたいと思っています。 これをanglejsで行う最良の方法は何ですか?最短のコードが必要なメソッドを探しています。 ありがとうプログレッシブスクロールwith angularjs
0
A
答えて
0
このコンセプトはページネーションと呼ばれ、時間をかけずにこれを達成したい場合は、既に使用可能なモジュールを選択する必要があります。
私はInfinite Scrollを使用しました。これは非常に使いやすく、すぐに物事を実装するのに役立ちます。
0
"無限スクロール"と呼ばれるライブラリを探しています。それはあなたがスクロールを検出するとの末尾にある
<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
エンドポイントの制限に追加し、毎回同じデータではなく残りのデータをロードするようにオフセットすることを忘れないでください。
関連する問題
- 1. AngularJS $ promises with NgResource
- 2. AngularJS with Sencha Touch
- 3. Laravel with AngularJSログイン
- 4. AngularJS issue with templateURL
- 5. json with angularjs
- 6. AngularJS filter with or
- 7. AngularJS 2 with SQL
- 8. AngularJS with Kendo/Bootstrap/JQuery/
- 9. angularjs with client side haml
- 10. 統合AngularJS with Ratchet.js
- 11. AngularJS 1 with ASP.Net MVC
- 12. AngularJS with Google Maps Radius
- 13. angularjs ui.router activestate with dropdown
- 14. AngularJS Error:[$ interpolate:noconcat] with SVG
- 15. angularJS ng-src with trustAsResourceURL
- 16. AngularJS with innerHTMLを使用
- 17. AngularJS ng-repeat with filter - notarray error
- 18. angularjs ng-repeat with dynamic json/object
- 19. AngularJS 1.5 with Component and Routing
- 20. AngularJSとng-repeat with ng-repeat
- 21. Angularjs UI multiselect with initial selection
- 22. AngularJS ng-repeat carousel with jQuery
- 23. AngularJs 2 with ASP .NET 4.5.1
- 24. AngularJS with global $ httpエラー処理
- 25. AngularJS ng-repeat dictionary with array value
- 26. ReCaptcha Googleのデータコールバックwith angularJs
- 27. 剣道ツリーリスト - refresh with angularjs
- 28. AngularJS ng-model description with example?
- 29. AngularJS with webviewのAndroidアプリケーション
- 30. HTML再生Base64エンコードされたaudio with angularJS with Error:[$ interpolate:noconcat]
これをアニメーション化する方法はありますか?アニメーションにjqueryを使用することは可能ですか? – Bob5421