我使用 MVC 4 创建了一个角度 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.事件模块.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);
});
SRDnames控制器.js
eventModule.controller("srdnamescontroller", function ($scope, EventsService) { EventsService.getSRDName().then(function (srdnames) { $scope.srdnames = srdnames }, function () { alert('error while fetching talks from server') })
});
5.活动服务.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/.. 请帮助
演示
有许多可能的解决方案。这是一个可能适合你的。实现定义以下内容的滚动模块:
- 无限滚动指令
- 用于获取可滚动数据的数据服务
您可以在应用中使用滚动模块:
.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);
});
});
});