无限滚动与AngleJS Spring MVC
[英]Infinity scroll with angularjs spring mvc
问题描述
This controller return list of invoices(model.addAttribute("invoices", invoiceService.getAllInvoices(user.getId()))) then redirect to invoices jsp page (Method invoiceService.getAllInvoices(user.getId()) is success). 
该控制器返回发票清单（model.addAttribute（“ invoices”，invoiceService.getAllInvoices（user.getId（）））），然后重定向到发票jsp页面（方法invoiceService.getAllInvoices（user.getId（）成功）。
@RequestMapping(value = { "/", "/get-all-invoices" }, method = RequestMethod.GET)
public String getAllInvoices(HttpServletRequest request, ModelMap model) {
User user = (User) request.getSession().getAttribute("user");
model.addAttribute("invoices", invoiceService.getAllInvoices(user.getId()));
model.addAttribute("title", "Invoices");
return "invoices";
}
Then, in invoices jsp page will get list of invoices. 然后，在发票的jsp页面上将获得发票清单。 However, The page isn't load the first 20 invoices, and loadmore function isn't working. 但是，该页面未加载前20张发票，并且loadmore功能不起作用。 Thanks for help! 感谢帮助！
<!DOCTYPE html> <html> <head> <script src="<c:url value="/resources/js/jquery-1.12.0.min.js" />" type="text/javascript"></script> <script src="<c:url value="/twitter.github.io/bootstrap/assets/css/bootstrap.css" />" type="text/css"></script> <script src="<c:url value="/twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" />" type="text/css"></script> <script src="<c:url value="/ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js" />" type="text/javascript"></script> <script src="<c:url value="/resources/js/app.js" />" type="text/javascript"></script> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body ng-controller="InvoiceController"ng-app="app"> <table class="table"> <tr ng-repeat="invoice in invoices | limitTo:totalDisplayed"><td>{{invoice.name}}</td> </tr> </table> <btn class="btn" ng-click="loadMore()">Load more</btn> <script> var app = angular.module('app', []); app.controller('InvoiceController', function ($scope) { $scope.invoices = invoices; $scope.totalDisplayed = 20; $scope.loadMore = function () { $scope.totalDisplayed += 20; }; }); </script> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2016-03-10 05:46:39
Angular side its correct, wrong in spring response type. 角侧正确，弹簧响应类型错误。
You are returning String, AngularJS ng-repeat will iterate list of objects only but You iterating String value. 您正在返回String，AngularJS ng-repeat将仅迭代对象列表，但您将迭代String值。
This is wrong: 这是错误的：
public String getAllInvoices(HttpServletRequest request, ModelMap model) { public String getAllInvoices（HttpServletRequest请求，ModelMap模型）{
User user = (User) request.getSession().getAttribute("user");
model.addAttribute("invoices", invoiceService.getAllInvoices(user.getId()));
model.addAttribute("title", "Invoices");
return "invoices";
} }
This should be: 应该是：
public List getAllInvoices(HttpServletRequest request, ModelMap model) { 公共列表 getAllInvoices（HttpServletRequest请求，ModelMap模型）{
User user = (User) request.getSession().getAttribute("user");
return invoiceService.getAllInvoices(user.getId());
} }
invoiceService.getAllInvoices(user.getId()) service should return list of invoices objects. invoiceService.getAllInvoices（user.getId（））服务应返回发票对象列表。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.