AngularJS、Ui引导和分页
大家好，新年快乐 我正在学习AngularJS，以便在我公司开发的下一个专业应用程序中使用它 我一直在使用ui引导模块中的分页指令。 total items属性始终未定义 在我的示例中，我想检索一个论坛，并从参考资料中对主题进行分页。 我认为分页指令不适用于延迟的值 你能帮我吗 服务内容如下：AngularJS、Ui引导和分页,angularjs,angular-ui-bootstrap,Angularjs,Angular Ui Bootstrap,大家好，新年快乐 我正在学习AngularJS，以便在我公司开发的下一个专业应用程序中使用它 我一直在使用ui引导模块中的分页指令。 total items属性始终未定义 在我的示例中，我想检索一个论坛，并从参考资料中对主题进行分页。 我认为分页指令不适用于延迟的值 你能帮我吗 服务内容如下： var serverUrl = "http://localhost:8080/cocoon.backend/webresources"; angular .module('cocoonAp
var serverUrl = "http://localhost:8080/cocoon.backend/webresources";
angular
.module('cocoonApp')
.factory('ForumService', ['$resource','$q', function ($resource,$q) {
return {
getForum: function (forumId) {
var resource = $resource(serverUrl + '/forum/:forumId', {forumId: '@forumId'});
return resource.get({forumId: forumId});
},
getTopics: function (forumId, page, nbResults) {
var resource = $resource(serverUrl + '/forum/:forumId/topic', {forumId: '@forumId'});
return resource.query({forumId: forumId,page:page,nbResults:nbResults});
}
};
}]);
angular
.module('cocoonApp')
.controller('ForumController',
['ForumService', '$stateParams', '$scope', '$log', '$q', function (service, $stateParams, $scope, $log, $q) {
$scope.currentForum = {};
$scope.topicsToShow = [];
$scope.nbTopicsPerPage = 1;
$scope.currentPage = 1;
$scope.totalItems = 0;
$scope.init = function () {
$scope.currentForum = service.getForum($stateParams.forumID);
$scope.currentForum
.$promise
.then(function (data) {
$log.log(data);
$scope.totalItems = data.nbTopics;
$log.log('totalItems ' + $scope.totalItems); /*print the good number*/
})
.then(function () {
$scope.loadTopics();
});
};
$scope.loadTopics = function () {
$log.log('Page changed to: ' + $scope.currentPage);
$scope.topicsToShow = service.getTopics($scope.currentForum.id, $scope.currentPage, $scope.nbTopicsPerPage);
};
}]);
<!DOCTYPE html>
<div class="content" ng-controller="ForumController" ng-init="init()">
<div class="content" >
<a ui-sref="forum({forumID:currentForum.parent.id})">
<h2>
<i class="icon-arrow-left"></i>
{{currentForum.parent.title}}
</h2>
</a>
<h1>
{{currentForum.title}}
</h1>
<div ng-repeat="child in currentForum.sousForums" >
<a ui-sref="forum({forumID:{{child.id}}})">
<h2>
<i class="icon-arrow-right"></i>
{{child.title}}
</h2>
</a>
</div>
</div>
<div class="container">
<h4>{{currentForum.nbTopics}} Topics</h4>
<table class="table-responsive table-topics">
<thead>
<tr>
<th>
Id
</th>
<th>
Topic
</th>
<th>
Autor
</th>
<th>
Nb messages
</th>
<th>
Last message
</th>
</tr>
</thead>
<tbody>
<tr topic-summary ng-model="topicsToShow" ng-repeat="topic in topicsToShow"></tr>
</tbody>
</table>
<pagination total-items="totalItems" ng-model="currentPage" ng-change="loadTopics()" ></pagination>
</div>
</div>
您的服务结果将作为success handler中的参数提供。您可以这样编写init函数：
$scope.init = function () {
$scope.currentForum = service.getForum($stateParams.forumID);
$scope.currentForum
.$promise
.then(function (result) {
$scope.totalItems = result.nbTopics;
}).then(function () {
$scope.loadTopics();
});
};
在成功处理程序中将$scope.currentForum.nbTopics的值分配给$scope.totalItems时，您是否获得了该值？是的，我得到了所需的真实数字。如果我用then（）方法打印它，我会得到好的值。指令似乎在then（）结束之前处理，我不知道如何让它等待。我已经尝试过了。我将编辑我的帖子以包含您的建议。then（）中的$scope可能与控制器的$scope不同。理想情况下不应该如此，但如果在代码中创建了新的作用域，您能否在html中创建一个像$scope.wrapper={totalItems:0}这样的包装对象wrapper total items=“wrapper.totalItems”并在成功处理程序中分配$scope.wrapper.totalItems=data.nbTopics。你能试一下吗？这几点也一样&范围确实一样。我是Angularjs的noob，这是我第一次尝试。我希望我的代码中没有遗漏什么…如果我强制使用init$scope.totalItems=50；此值已考虑在内。这表明pagination指令在控制器的ng int结束之前对自身进行初始化。
$scope.init = function () {
$scope.currentForum = service.getForum($stateParams.forumID);
$scope.currentForum
.$promise
.then(function (result) {
$scope.totalItems = result.nbTopics;
}).then(function () {
$scope.loadTopics();
});
};