如何为 AngularJS 和 MVC 实现无限滚动

Question

我使用 MVC 4 创建了一个 angular JS 应用程序

我创建了一个呈现模板的视图，因为我们有一个包含大量数据的模板，因为缺少记录，我希望实现无限滚动

1.index.cshtml

<div id="sidebar-left" class="span2">
    <div class="nav-collapse sidebar-nav">
        <ul class="nav nav-tabs nav-stacked main-menu">
            <li class="navbar-brand"><a href="/Events/Talks">Talks</a></li>
            <li class="navbar-brand"><a href="/Events/SRDNames">SRDNames</a></li>
            <li class="navbar-brand"><a href="/Events/Speakers">Speakers</a></li>
            <li class="navbar-brand"><a href="/Events/AddTalk">Add Talk</a></li>
        </ul>
    </div>
</div>

SRDNames.cshtml

  <div class="box-content">
    <table class="table table-striped table-bordered bootstrap-datatable datatable">
    <tr>
        <th>
            SRD_NAME
        </th>
        <th>
            CREATED_BY_USER_ID
        </th>
    </tr>
    <tr ng-repeat="srdname in srdnames">
        <td>
            {{srdname.sRD_NAME}}
        </td>
        <td>
            {{srdname.cREATED_BY_USER_ID}}
        </td>
    </tr>
</table>

3.eventModule.js

   var eventModule = angular.module("eventModule", []).config(function ($routeProvider, $locationProvider) {
        //Path - it should be same as href link
        $routeProvider.when('/Events/Talks', { templateUrl: '/Templates/Talk.html', controller: 'eventController' });
        $routeProvider.when('/Events/Speakers', { templateUrl: '/Templates/Speaker.html', controller: 'speakerController' });
        $routeProvider.when('/Events/AddTalk', { templateUrl: '/Templates/AddTalk.html', controller: 'talkController' });
        $routeProvider.when('/Events/SRDNames', { templateUrl: '/Templates/SRDNames.html', controller: 'srdnamescontroller' });
        $locationProvider.html5Mode(true);
    });

srdnamescontroller.js

eventModule.controller("srdnamescontroller", function ($scope, EventsService) {
EventsService.getSRDName().then(function (srdnames) { $scope.srdnames = srdnames }, function ()
{ alert('error while fetching talks from server') })

});

5.EventsService.js

eventModule.factory("EventsService", function ($http, $q) {
    return {

        getSRDName: function () {
            // Get the deferred object
            var deferred = $q.defer();
            // Initiates the AJAX call
            $http({ method: 'GET', url: '/events/GetSRDName' }).success(deferred.resolve).error(deferred.reject);
            // Returns the promise - Contains result once request completes
            return deferred.promise;
        },

});

希望在上面的应用程序中像 http://jsfiddle.net/vojtajina/U7Bz9/ 一样实现.. 请帮忙

Answer 1

Demo

有很多可能的解决方案。这是一个可能适合你的。实现定义以下内容的滚动模块：

一个无限滚动指令
获取可滚动数据的数据服务

您可以在您的应用中使用滚动模块：

HTML:

<div ng-app="app" ng-controller="ctrl">
    <div infinite-scroll="items">
    </div>
</div>

JS:

var app = angular.module('app', ['scroll']);
app.controller('ctrl', function($scope, dataService) {
    $scope.items = [];
    dataService.loadMore($scope.items, function(lastItem) {
        var items = [];
        var id = lastItem ? lastItem.id : 0;
        for (var i = 0; i < 5; i++) {
            items.push({id: id + i});
        }
        return items;
    });
});

dataService 公开了一个接受数组的 loadMore 方法，以及一个用于加载更多数据的回调函数。上面的示例通过遍历 5 个项目并添加到数组来加载更多数据。但是您可以自定义此函数回调以从另一个服务检索数据：

var app = angular.module('app', ['scroll']);
app.controller('ctrl', function($scope, $http, dataService) {
    $scope.items = [];
    dataService.loadMore($scope.items, function(lastItem, done) {
          var lastItemId = lastItem ? lastItem.id : '';
          $http({ method: 'GET',url:'api/items/' + lastItemId})
               .success(function(items) {
                   done(items);
                });            
    });
});

如何为 AngularJS 和 MVC 实现无限滚动

How to implement Infinite Scrolling for AngularJS & MVC

angularjs

asp.net-mvc-4

angularjs-ng-repeat