我正在尝试在我的AngularJs项目中实现无限滚动，并且我使用嵌套的ng-repeat并通过JAVA API绑定数据，服务的数据返回很大，因此性能变得非常低。我用谷歌搜索了不同的解决方案，没有什么对我有用。
控制器代码
var developerController = ['$rootScope', '$scope', '$location', '$window',
'developerData', '$route', '$timeout', '$compile', '$routeParams',
function($rootScope, $scope, $location, $window, developerData, $route, $timeout, $compile, $routeParams) {
globalModel.showSpinner();
$scope.developerData = developerData.retData[0];
// $scope.homeData = homeData.retData;
$scope.perpages = 10;
$scope.hasReadMore = false;
$scope.windowScrolled = false;
var hasPageInUrl = $location.url().indexOf('page=') != -1;
$scope.pageParm = parseInt($routeParams.page);
$scope.hasPageInUrl = hasPageInUrl;
// alert($scope.hasPageInUrl);
setTimeout(function() {
$("#abtDeveloperContent").html($scope.developerData.abtDeveloper);
});
$scope.isMobileAppBanner = function(index) {
index = index + 1;
return ((index % 6) / 100 == 0);
};
if ($scope.hasPageInUrl == true && angular.isNumber($scope.pageParm) == true) {
$scope.currentPage = $scope.pageParm;
} else {
$scope.currentPage = 1;
}
$scope.totalPages = Math.ceil($scope.developerData.projects.length / $scope.perpages);
if ($scope.currentPage > $scope.totalPages) {
var newurl = $location.protocol() + "://" + $location.host() + $location.path();
window.location.href = newurl;
} else {
globalModel.showSpinner();
$scope.developerPaginatedData = $scope.developerData.projects;
$scope.developerPaginatedData.sort(function(a, b) {
return b.totalProjects - a.totalProjects
});
$scope.filteredProjects = [];
$scope.isMobile = $rootScope.isMobile;
$scope.maxSize = 5;
if ($scope.isMobile == true) {
$scope.maxSize = 3;
}
$scope.begin = 0;
$scope.end = 0;
$rootScope.approvedCities = appConfig.approvedCities;
$scope.numPages = function() {
return Math.ceil($scope.developerData.projects.length / $scope.perpages);
};
$scope.FlagshipImage = '';
/* Pagination Logic */
if ($scope.isMobile == true || $rootScope.isFragment == true || hasPageInUrl == true) {
$scope.$watch('currentPage + numPerPage', function() {
//$scope.panIndiaDataArr = globalModel.doPaging($scope.panIndiaData,4);
if ($scope.currentPage > $scope.totalPages || $scope.pageParm <= 1) {
var newurl = $location.protocol() + "://" + $location.host() + $location.path();
// window.location.href = newurl;
}
var begin = (($scope.currentPage - 1) * $scope.perpages),
end = begin + $scope.perpages;
$scope.filteredProjects = $scope.developerData.projects.slice(begin, end);
console.log($scope.filteredProjects);
$scope.developerDataArr = globalModel.doPaging($scope.filteredProjects, 6);
//console.log($scope.developerDataArr);
$timeout(function() {
$(".dev_ui_bootstarp_pagination").each(function(i, paginationlink) {
var pageno = $(this).attr("pageno");
var isdisabled = $(this).parent().hasClass("disabled");
if (isdisabled == false && pageno > 1 && parseInt($(this).text()) > 1) {
$(this).attr("href", $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + pageno);
}
if (pageno == 1) {
$(this).attr("href", $location.protocol() + "://" + $location.host() + $location.path());
}
if ($(this).text() == "<<") {
var firstpageno = $(".panindia_pagination > ul > li:first").next().find("a").attr("pageno");
if (firstpageno > 1) {
var prevno = parseInt(firstpageno) - 1;
$(this).attr("href", $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + prevno);
} else {
$(this).removeAttr("href");
$(this).parent().addClass("disabled");
}
}
if ($(this).text() == ">>") {
var lastpageno = $(".panindia_pagination > ul > li:last").prev().find("a").attr("pageno");
if (lastpageno < $scope.totalPages) {
var nextno = parseInt(lastpageno) + 1;
$(this).attr("href", $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + nextno);
} else {
$(this).removeAttr("href");
$(this).parent().addClass("disabled");
}
}
});
});
});
}
}
if ($scope.isMobile == false && hasPageInUrl == false && $rootScope.isFragment == false) {
$scope.loadMore = function() {
// alert("load more called");
var offset = $('#dev_loadmore').offset().top - $(window).scrollTop();
if (offset <= window.innerHeight && ((parseInt($scope.currentPage) + 1) <= $scope.totalPages || $scope.currentPage == 1)) {
if ($scope.end > $scope.developerData.projects.length) {
return false;
}
$scope.begin = 0;
$scope.end = $scope.end + $scope.perpages;
$scope.windowScrolled = true;
$("#dev_loadmore").overlay();
$scope.filteredProjects = $scope.developerData.projects.slice($scope.begin, $scope.end);
$scope.developerDataArr = globalModel.doPaging($scope.filteredProjects, 6);
$("#dev_loadmore").overlayout();
$scope.windowScrolled = false;
}
$timeout(function() {
$(".dev_ui_bootstarp_pagination").each(function(i, paginationlink) {
var pageno = $(this).attr("pageno");
var isdisabled = $(this).parent().hasClass("disabled");
if (isdisabled == false && pageno > 1 && parseInt($(this).text()) > 1) {
$(this).attr("href", $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + pageno);
}
if (pageno == 1) {
$(this).attr("href", $location.protocol() + "://" + $location.host() + $location.path());
}
if ($(this).text() == "<<") {
var firstpageno = $(".panindia_pagination > ul > li:first").next().find("a").attr("pageno");
if (firstpageno > 1) {
var prevno = parseInt(firstpageno) - 1;
$(this).attr("href", $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + prevno);
} else {
$(this).removeAttr("href");
$(this).parent().addClass("disabled");
}
}
if ($(this).text() == ">>") {
var lastpageno = $(".panindia_pagination > ul > li:last").prev().find("a").attr("pageno");
if (lastpageno < $scope.totalPages) {
var nextno = parseInt(lastpageno) + 1;
$(this).attr("href", $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + nextno);
} else {
$(this).removeAttr("href");
$(this).parent().addClass("disabled");
}
}
});
});
};
}
/* formation of previous and next url in html source ccode */
var prev_rel = "";
var next_rel = "";
if ($scope.currentPage == 1) {
next_rel = "<link rel='next' href='" + $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + ($scope.currentPage + 1) + "'>";
}
if ($scope.currentPage > 1 && $scope.currentPage <= $scope.totalPages) {
if ($scope.currentPage == 2) {
prev_rel = "<link rel='prev' href='" + $location.protocol() + "://" + $location.host() + $location.path() + "'>";
} else {
prev_rel = "<link rel='prev' href='" + $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + ($scope.currentPage - 1) + "'>";
}
if ($scope.currentPage < $scope.totalPages) {
next_rel = "<link rel='next' href='" + $location.protocol() + "://" + $location.host() + $location.path() + "?page=" + ($scope.currentPage + 1) + "'>";
}
}
$("head > link[rel='prev'],head > link[rel='next']").remove();
if ($scope.totalPages > 1) {
$("head").append(prev_rel);
$("head").append(next_rel);
}
//console.log($scope.developerData.abtDeveloper);
$timeout(function() {
$scope.$apply(function() {
developerUI.init();
$('html,body,.listingTilesBox').animate({
scrollTop: 0
}, 1000);
globalModel.hideSpinner("from developerController - line no 31");
});
});
$timeout(function() {
$scope.$apply(function() {
$rootScope.pagelevel = 'HOME';
$("#footerlink_container").html('');
angular.element(document.getElementById('footerlink_container')).append(
$compile("<footer-data></footer-data>")($rootScope));
$rootScope.global.setFooterData();
if ($rootScope.city == undefined) {
$rootScope.seopagelevel = 'PAN-INDIA-BUILDER';
}
$("#footerlink_seocontainer").html('');
angular.element(document.getElementById('footerlink_seocontainer')).append(
$compile("<seo-footer-data></seo-footer-data>")($rootScope));
$rootScope.global.setSeoFooterData();
developerUI.init();
var height = $('#abtDeveloperContent').height();
if (height > 200) {
$scope.hasReadMore = true;
setTimeout(function() {
$(".readmoreSection .readMoreBox").off("click");
$(".readmoreSection .readMoreBox").on("click", function() {
$(".readmoreSection").toggleClass("fullHeight");
});
});
}
$($("#abtDeveloperContent").find("ul li")).each(function(i, desc_li) {
var lihtml = $(this).html();
$(this).html("<i class='fa fa-circle fs-10' aria-hidden='true'></i> " + lihtml);
});
globalModel.hideSpinner("from developerController - line no 104");
});
});
}
];
用于绑定数据的Html
<div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
<div ng-repeat="projectPaginationData in developerDataArr" ng-init="rowIndex = $index" ng-if="(isMobile==false && isFragment==false && hasPageInUrl == false)">
<div ng-repeat="project in projectPaginationData" ng-if="$index >= begin && $index <= end">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<project-info ng-model="project" ng-init="project.type = 'INDIA'" show-units="true" />
</div>
<deal-app-banner ng-if="isMobileAppBanner($index)"></deal-app-banner>
<deal-lead-banner ng-if="$index == 1 && rowIndex == 1 "></deal-lead-banner>
</div>
</div>
<div ng-repeat="projectPaginationData in developerDataArr" ng-init="rowIndex = $index" ng-if="(isMobile==true || isFragment==true || hasPageInUrl == true)">
<div ng-repeat="project in projectPaginationData">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<project-info ng-model="project" ng-init="project.type = 'INDIA'" show-units="true" />
</div>
<deal-app-banner ng-if="isMobileAppBanner($index)"></deal-app-banner>
<deal-lead-banner ng-if="$index == 1 && currentPage == 2"></deal-lead-banner>
</div>
</div>
loadMore（）函数用于启用无限滚动。
请帮帮我。
答案 0 :(得分：0)
使用limitTo过滤器。这是doc Angular limitTo
ng-repeat="d in data | limitTo:numberOfItemsDisplayed"