{{numPages}} 未被分页指令计算 [英] {{numPages}} not being calculated by pagination directive
本文介绍了{{numPages}} 未被分页指令计算的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对分页指令的印象是 {{numPages}} 值将由指令计算.它没有为我返回任何东西.
我缺少什么才能使其正常工作吗?如果指令应该为我做这件事，我不想计算它.否则分页效果很好.
<分页总项目=总项目"ng-model="currentPage"最大尺寸=最大尺寸"items-per-page="itemsPerPage"类=分页-sm"边界链接=真"旋转=假"></分页><table class="table table-striped"><tr><td style="width:150px;">GPT ID</td><td style="width:250px;">治疗区域</td><td style="width:450px;">GPT 描述</td><td style="width:150px;">动作</td></tr><tr ng-repeat="prGpt in prGpts | orderBy:['therapyArea.therapyArea','gptDesc'] | startFrom:(currentPage -1) * itemsPerPage | limitTo: itemsPerPage"><td>{{prGpt.id}}</td><td><span ng-if="!prGpt.editMode">{{prGpt.therapyArea.therapyArea}}</span><span ng-if="prGpt.editMode && !createMode"><select class="form-control" style="width:150px;"ng-model="selectedGpt.therapyArea" ng-options="item as item.therapyArea for item intherapyAreas"/></span></td><td><span ng-if="!prGpt.editMode">{{prGpt.gptDesc}}</span><span ng-if="prGpt.editMode && !createMode"><input class="form-control" type="text" style="width:400px;"ng-model="selectedGpt.gptDesc"/></span></td><td><span ng-if="!prGpt.editMode" class="glyphicon glyphicon-pencil" ng-click="copySelectedGpt(prGpt);beginEditGpt()"/><span ng-if="prGpt.editMode && !createMode" class="glyphicon glyphicon-floppy-disk" ng-click="saveEditGpt()"/><span ng-if="prGpt.editMode && !createMode" class="glyphicon glyphicon-thumbs-down" ng-click="cancelEditGpt()"/><span ng-if="!prGpt.editMode && !createMode" class="glyphicon glyphicon-remove-circle" ng-click="copySelectedGpt(prGpt);openDeleteDialog()"/><span><a ng-href="#!pr/gptProjects/{{prGpt.id}}">编辑项目</a></span></tr><br/><pre>Page: {{currentPage}}/{{numPages}}</pre>控制器:
//GPT 列表控制器.controller('prGPTCtrl',['$scope', '$modal', '$dialog', 'Restangular', 'prTAService', 'prGPTService', function($scope, $modal, $dialog, Restangular, prTAService,prGPTService) {//window.alert('prGPTCtrl');$scope.prGpts = {};$scope.therapyAreas = {};$scope.createMode = false;$scope.selectedGpt = {};$scope.newGpt = {};//分页$scope.currentPage = 1;$scope.itemsPerPage = 10;$scope.maxSize = 20;$scope.totalItems = $scope.prGpts.length;Restangular.setBaseUrl('resources/pr');//调用TA服务获取下拉列表的TA列表//然后成功获取gpt列表prTAService.getTAs().then(function(tas) {$scope.therapyAreas = tas;prGPTService.getGPTs().then(function(gpts) {//window.alert('prGPTCtrl:getGPTs');$scope.prGpts = gpts;});});$scope.$watch('prGpts.length', function(){$scope.totalItems = $scope.prGpts.length;});/** 复制选定的 GPT 以进行复制*/$scope.copySelectedGpt = 函数(prGpt){$scope.selectedGpt = Restangular.copy(prGpt);};$scope.beginEditGpt = function() {var gpt = {};var ta = {};var gpt;for(var i = 0; i < $scope.prGpts.length;i++) {gpt = $scope.prGpts[i];gpt.editMode = false;}var index = _.findIndex($scope.prGpts, function(b) {返回 b.id === $scope.selectedGpt.id;});gpt = $scope.prGpts[index];gpt.editMode = true;var taIndex = _.findIndex($scope.therapyAreas, function(b) {返回 b.id === $scope.selectedGpt.therapyArea.id;});ta = $scope.therapyAreas[taIndex];$scope.selectedGpt.therapyArea = ta;$scope.createMode = false;};$scope.cancelEditGpt = function() {var gpt;for(var i = 0; i < $scope.prGpts.length;i++) {gpt = $scope.prGpts[i];gpt.editMode = false;}var index = _.findIndex($scope.prGpts, function(b) {返回 b.id === $scope.selectedGpt.id;});$scope.selectedGpt = null;$scope.prGpts[index].editMode = false;};$scope.saveEditGpt = function() {$scope.selectedGpt.save().then(function (gpt) {//在数组中找到与当前正在编辑的副本相对应的索引var index = _.findIndex($scope.prGpts, function(b) {返回 b.id === $scope.selectedGpt.id;});$scope.prGpts[index] = $scope.selectedGpt;$scope.prGpts[index].editMode = false;$scope.selectedGpt = null;},功能(错误){window.alert('发生错误:' + err);});};//创建一个新的 GPT$scope.createGpt = function() {$scope.createMode = true;var gpt;for(var i = 0; i < $scope.prGpts.length;i++) {gpt = $scope.prGpts[i];gpt.editMode = false;}};$scope.saveNewGpt = function() {Restangular.all('/gpt/gpts').post($scope.newGpt).then(function(gpt) {$scope.newGpt = {};$scope.prGpts.push(gpt);$scope.createMode = false;//window.alert('created new GPT ' + gpt.gptDesc + ' with id ' + gpt.id);});};$scope.openDeleteDialog = function() {var title = "请确认删除 GPT" + $scope.selectedGpt.gptDesc;var msg = "<b>删除 GPT?请确认...</b>";var btns = [{result:'CANCEL', label:'Cancel'},{结果:'OK'，标签:'OK'，cssClass:'btn-primary'}];$dialog.messageBox(title, msg, btns, function(result) {如果(结果 === 'OK'){$scope.deleteGpt();}});};$scope.deleteGpt = function() {$scope.selectedGpt.remove().then(function() {$scope.prGpts = _.without($scope.prGpts, _.findWhere($scope.prGpts, {id: $scope.selectedGpt.id}));$scope.selectedGpt = null;},功能() {window.alert("尝试删除 GPT 时出现问题 " + $scope.selectedGpt.gptDesc);});};}]);我有一个 startFrom 过滤器.
.filter('startFrom', function () {返回函数(输入，开始){if (input === undefined || input === null || input.length === 0||开始 === 未定义 ||开始 === 空 ||start.length === 0 ||开始 === NaN) 返回 [];开始 = + 开始；//解析为int尝试 {var 结果 = input.slice(start);返回结果；}赶上(e){//警报(输入)；}};})问候
我
解决方案
看起来你的 num-pages="numPages"> 标签.本质上，您必须为 pagination 提供一个变量，以在其中返回页数.这是通过 num-pages
<分页num-pages="numPages" 总项目=总项目"ng-model="currentPage"最大尺寸=最大尺寸"items-per-page="itemsPerPage"类=分页-sm"边界链接=真"旋转=假"></分页>I was under the impression with the pagination directive that the {{numPages}} value would be calculated by the directive. It isn't returning anything for me.
Is there anything I am missing to get this working properly? I don't want to have to calculate it, if the directive is supposed to be doing this for me. Otherwise paging is working great.
<pagination
total-items="totalItems"
ng-model="currentPage"
max-size="maxSize"
items-per-page="itemsPerPage"
class="pagination-sm"
boundary-links="true" rotate="false">
</pagination>
<table class="table table-striped">
<tr>
<td style="width:150px;">GPT ID</td>
<td style="width:250px;">Therapy Area</td>
<td style="width:450px;">GPT Description</td>
<td style="width:150px;">Actions</td>
</tr>
<tr ng-repeat="prGpt in prGpts | orderBy:['therapyArea.therapyArea','gptDesc'] | startFrom:(currentPage -1) * itemsPerPage | limitTo: itemsPerPage">
<td>{{prGpt.id}}</td>
<td>
<span ng-if="!prGpt.editMode">{{prGpt.therapyArea.therapyArea}}</span>
<span ng-if="prGpt.editMode && !createMode">
<select class="form-control" style="width:150px;" ng-model="selectedGpt.therapyArea" ng-options="item as item.therapyArea for item in therapyAreas"/>
</span>
</td>
<td>
<span ng-if="!prGpt.editMode">{{prGpt.gptDesc}}</span>
<span ng-if="prGpt.editMode && !createMode"><input class="form-control" type="text" style="width:400px;" ng-model="selectedGpt.gptDesc" /></span>
</td>
<td>
<span ng-if="!prGpt.editMode" class="glyphicon glyphicon-pencil" ng-click="copySelectedGpt(prGpt);beginEditGpt()"/>
<span ng-if="prGpt.editMode && !createMode" class="glyphicon glyphicon-floppy-disk" ng-click="saveEditGpt()"/>
<span ng-if="prGpt.editMode && !createMode" class="glyphicon glyphicon-thumbs-down" ng-click="cancelEditGpt()"/>
<span ng-if="!prGpt.editMode && !createMode" class="glyphicon glyphicon-remove-circle" ng-click="copySelectedGpt(prGpt);openDeleteDialog()"/>
<span><a ng-href="#!pr/gptProjects/{{prGpt.id}}">Edit Projects</a>
</span>
</tr>
</table>
<br/>
<pre>Page: {{currentPage}} / {{numPages}}</pre>
</div>
controller:
// GPT List Controller
.controller('prGPTCtrl',['$scope', '$modal', '$dialog', 'Restangular', 'prTAService', 'prGPTService', function($scope, $modal, $dialog, Restangular, prTAService, prGPTService) {
// window.alert('prGPTCtrl');
$scope.prGpts = {};
$scope.therapyAreas = {};
$scope.createMode = false;
$scope.selectedGpt = {};
$scope.newGpt = {};
// pagination
$scope.currentPage = 1;
$scope.itemsPerPage = 10;
$scope.maxSize = 20;
$scope.totalItems = $scope.prGpts.length;
Restangular.setBaseUrl('resources/pr');
//call the TA service to get the TA list for the drop down lists
//and then get the gpt list once successful
prTAService.getTAs().then(function(tas) {
$scope.therapyAreas = tas;
prGPTService.getGPTs().then(function(gpts) {
//window.alert('prGPTCtrl:getGPTs');
$scope.prGpts = gpts;
});
});
$scope.$watch('prGpts.length', function(){
$scope.totalItems = $scope.prGpts.length;
});
/*
* Take a copy of the selected GPT to copy in
*/
$scope.copySelectedGpt = function(prGpt) {
$scope.selectedGpt = Restangular.copy(prGpt);
};
$scope.beginEditGpt = function() {
var gpt = {};
var ta = {};
var gpt;
for(var i = 0; i < $scope.prGpts.length;i++) {
gpt = $scope.prGpts[i];
gpt.editMode = false;
}
var index = _.findIndex($scope.prGpts, function(b) {
return b.id === $scope.selectedGpt.id;
});
gpt = $scope.prGpts[index];
gpt.editMode = true;
var taIndex = _.findIndex($scope.therapyAreas, function(b) {
return b.id === $scope.selectedGpt.therapyArea.id;
});
ta = $scope.therapyAreas[taIndex];
$scope.selectedGpt.therapyArea = ta;
$scope.createMode = false;
};
$scope.cancelEditGpt = function() {
var gpt;
for(var i = 0; i < $scope.prGpts.length;i++) {
gpt = $scope.prGpts[i];
gpt.editMode = false;
}
var index = _.findIndex($scope.prGpts, function(b) {
return b.id === $scope.selectedGpt.id;
});
$scope.selectedGpt = null;
$scope.prGpts[index].editMode = false;
};
$scope.saveEditGpt = function() {
$scope.selectedGpt.save().then(function (gpt) {
// find the index in the array which corresponds to the current copy being edited
var index = _.findIndex($scope.prGpts, function(b) {
return b.id === $scope.selectedGpt.id;
});
$scope.prGpts[index] = $scope.selectedGpt;
$scope.prGpts[index].editMode = false;
$scope.selectedGpt = null;
},
function(err) {
window.alert('Error occured: ' + err);
}
);
};
// create a new GPT
$scope.createGpt = function() {
$scope.createMode = true;
var gpt;
for(var i = 0; i < $scope.prGpts.length;i++) {
gpt = $scope.prGpts[i];
gpt.editMode = false;
}
};
$scope.saveNewGpt = function() {
Restangular.all('/gpt/gpts').post($scope.newGpt).then(function(gpt) {
$scope.newGpt = {};
$scope.prGpts.push(gpt);
$scope.createMode = false;
// window.alert('created new GPT ' + gpt.gptDesc + ' with id ' + gpt.id);
});
};
$scope.openDeleteDialog = function() {
var title = "Please confirm deletion of GPT " + $scope.selectedGpt.gptDesc;
var msg = "<b>Delete GPT? Please confirm...</b>";
var btns = [{result:'CANCEL', label: 'Cancel'},
{result:'OK', label: 'OK', cssClass: 'btn-primary'}];
$dialog.messageBox(title, msg, btns, function(result) {
if (result === 'OK') {
$scope.deleteGpt();
}
});
};
$scope.deleteGpt = function() {
$scope.selectedGpt.remove().then(function() {
$scope.prGpts = _.without($scope.prGpts, _.findWhere($scope.prGpts, {id: $scope.selectedGpt.id}));
$scope.selectedGpt = null;
},
function() {
window.alert("There was an issue trying to delete GPT " + $scope.selectedGpt.gptDesc);
}
);
};
}]);
I have a startFrom filter.
.filter('startFrom', function () {
return function (input, start) {
if (input === undefined || input === null || input.length === 0
|| start === undefined || start === null || start.length === 0 || start === NaN) return [];
start = +start; //parse to int
try {
var result = input.slice(start);
return result;
} catch (e) {
// alert(input);
}
};
})
Regards
i
解决方案
Looks like you're just missing num-pages="numPages" on your <pagination> tag. Essentially you have to provide a variable to pagination in which to return the number of pages. This is done via num-pages
<pagination
num-pages="numPages" <!-- Add this here -->
total-items="totalItems"
ng-model="currentPage"
max-size="maxSize"
items-per-page="itemsPerPage"
class="pagination-sm"
boundary-links="true" rotate="false">
</pagination>
这篇关于{{numPages}} 未被分页指令计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
