无法获取在angularjs超过15行 [英] Unable to fetch more than 15 rows in angularjs
本文介绍了无法获取在angularjs超过15行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对在响应数据25rows。使用分页后，每次取每一页5行只有3页来了。
code：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENNG-应用=对myApp＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;基本href =/＆GT;
＆LT;标题＆gt;将单页Blogger的LT; /标题＆GT;
＆LT;脚本src=\"http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js\"></script>
＆LT;链接rel =stylesheet属性HREF =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css＆GT;
＆所述; SCRIPT SRC =http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js＆GT;＆下; /脚本＆GT;
＆LT;脚本数据需要=UI自举@ *数据semver =0.12.1SRC =http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1。 min.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =＆下;％= request.getContextPath（）％＆GT; /js/module.js＆GT;＆下; /脚本＆GT;
＆LT;链接rel =样式的href =＆LT;％= request.getContextPath（）％GT; /style2.css/＆GT;
＆LT;脚本＆GT; app.factory（'tableService'，函数（$ HTTP，$ Q）{
返回{
fetchTable：功能（）{
//将$ HTTP API是基于由$ Q服务公开的递延/ API的承诺
//所以它在默认情况下会返回一个承诺我们
返回$ http.get（'＆LT;％= request.getContextPath（）％GT; /GetTable.do'）
。然后（功能（响应）{
如果（typeof运算response.data ==='对象'）{
返回response.data;
}其他{
//无效响应
返回$ q.reject（response.data）;
}
}，函数（响应）{
// 出了些问题
返回$ q.reject（response.data）;
}）;
}
};
}）; app.controller（'tableController'，函数（$日志$范围，tableService）
{
$ scope.filteredTodos = []
，$ scope.currentPage = 1
，$ scope.numPerPage = 5
，$ scope.maxSize = 5; $ scope.customerTable = []; $ scope.getData =功能（）{ VAR承诺= tableService.fetchTable（）; promise.then（功能（数据）
{
的console.log（你的名字是：+数据）; $ scope.customerTable =数据;
$范围。$表（当前页+ numPerPage功能（）{
VAR开始=（（$ scope.currentPage - 1）* $ scope.numPerPage）
，最终=开始+ $ scope.numPerPage; $ scope.filteredTodos = $ scope.customerTable.slice（开始，结束）;
}）;
}）;
}
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV CLASS =容器ID =主＆GT;＆LT; BR /＆GT;＆LT; BR /＆GT;
搜索：LT;输入类型=文本NG模型=搜索占位符=搜索＆GT;
＆LT; DIV NG控制器=tableControllerNG-的init =的getData（）＆GT;
＆LT;表类=table表条纹表悬停表镶上＆GT;
＆所述; TR＆GT;
百分位风格=FONT-SIZE：13.3px＆GT;卡号和LT; /第i
百分位风格=FONT-SIZE：13.3px＆gt;首先名称和LT; /第i
百分位风格=FONT-SIZE：13.3px＆GT;开放余量＆lt; /第i
百分位风格=FONT-SIZE：13.3px＆GT;退学与LT; /第i
百分位风格=FONT-SIZE：13.3px＆GT;存款和LT; /第i
百分位风格=FONT-SIZE：13.3px＆GT;关闭余量＆lt; /第i
百分位风格=FONT-SIZE：13.3px＆GT;的Tx日期和LT; /第i
百分位风格=FONT-SIZE：13.3px＆GT;使用类型＆lt; /第i
＆LT; / TR＆GT;
＆LT; TR NG重复=数据filteredTodos |过滤器：搜索＆GT;
＆所述; TD＆GT; {{data.CARD_NUMBER}}＆下; / TD＆GT;
＆所述; TD＆GT; {{data.FIRST_NAME}}＆下; / TD＆GT;
＆所述; TD＆GT; {{data.OPENING_BALANCE}}＆下; / TD＆GT;
＆所述; TD＆GT; {{data.WITHDRAWAL}}＆下; / TD＆GT;
＆所述; TD＆GT; {{data.DEPOSIT}}＆下; / TD＆GT;
＆所述; TD＆GT; {{data.CLOSING_BAL}}＆下; / TD＆GT;
＆所述; TD＆GT; {{data.TXDATE}}＆下; / TD＆GT;
＆所述; TD＆GT; {{data.USAGE_TYPE}}＆下; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT;分页
NG-模式=当前页
总项=customerTable.length
最大规模=MAXSIZE
边界链接=false的＆GT;
＆LT; /分页＆GT;
＆LT; BR /＆GT;＆LT; BR /＆GT;＆LT; BR＆GT;
＆LT; /表及GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
尝试添加项目的单页=在5你的分页标记。
例如。
＆LT;分页
NG-模式=当前页
项目每页=5
总项=customerTable.length
最大规模=MAXSIZE
边界链接=false的＆GT;
＆LT; /分页＆GT;
希望它帮助。
I have about 25rows in the response data. After using pagination, it fetches 5 rows per each page and there are only 3 pages coming up.
code:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<base href="/">
<title>The Single Page Blogger</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="<%=request.getContextPath()%>/js/module.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/style2.css" />
<script>
app.factory('tableService', function ($http, $q) {
return {
fetchTable: function () {
// the $http API is based on the deferred/promise APIs exposed by the $q service
// so it returns a promise for us by default
return $http.get('<%=request.getContextPath()%>/GetTable.do')
.then(function (response) {
if (typeof response.data === 'object') {
return response.data;
} else {
// invalid response
return $q.reject(response.data);
}
}, function (response) {
// something went wrong
return $q.reject(response.data);
});
}
};
});
app.controller('tableController', function ($log, $scope, tableService)
{
$scope.filteredTodos = []
, $scope.currentPage = 1
, $scope.numPerPage = 5
, $scope.maxSize = 5;
$scope.customerTable = [];
$scope.getData = function () {
var promise = tableService.fetchTable();
promise.then(function (data)
{
console.log("Your name is: " + data);
$scope.customerTable = data;
$scope.$watch("currentPage + numPerPage", function () {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.customerTable.slice(begin, end);
});
});
}
});
</script>
</head>
<body>
<div class="container" id="main"><br/><br/>
Search: <input type="text" ng-model="search" placeholder="Search">
<div ng-controller="tableController" ng-init="getData()">
<table class="table table-striped table-hover table-bordered">
<tr>
<th style="font-size: 13.3px">Card number</th>
<th style="font-size: 13.3px">First name</th>
<th style="font-size: 13.3px">Opening balance</th>
<th style="font-size: 13.3px">Withdrawal</th>
<th style="font-size: 13.3px">Deposit</th>
<th style="font-size: 13.3px">Closing balance</th>
<th style="font-size: 13.3px">Tx date</th>
<th style="font-size: 13.3px">Usage type</th>
</tr>
<tr ng-repeat="data in filteredTodos| filter: search">
<td>{{data.CARD_NUMBER}}</td>
<td>{{data.FIRST_NAME}}</td>
<td>{{data.OPENING_BALANCE}}</td>
<td>{{data.WITHDRAWAL}}</td>
<td>{{data.DEPOSIT}}</td>
<td>{{data.CLOSING_BAL}}</td>
<td>{{data.TXDATE}}</td>
<td>{{data.USAGE_TYPE}}</td>
</tr>
</table>
<pagination
ng-model="currentPage"
total-items="customerTable.length"
max-size="maxSize"
boundary-links="false">
</pagination>
<br/><br/><br>
</form>
</div>
</div>
</body>
</html>
解决方案
Try adding items-per-page="5" in your pagination tag.
E.g.
<pagination
ng-model="currentPage"
items-per-page="5"
total-items="customerTable.length"
max-size="maxSize"
boundary-links="false">
</pagination>
Hope it helps.
这篇关于无法获取在angularjs超过15行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
