您好我正在使用WebAPI在angularjs中开发网站。我正在展示汽车细节(图片,型号名称和价格)。我有三个下拉菜单。基于下拉选择的值,我将绑定到div的值如下。Angularjs分页不起作用
<pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" items-per-page="itemsPerPage"></pagination>
<div class="grid-container">
<div class="grid" ng-repeat="car in carDetails.slice(((currentPage-1)*itemsPerPage),((currentPage)*itemsPerPage))">
<img class="car" src="{{car.WebImageURL}}">
<div class="car-name">{{car.make}}<span class="make">{{car.model}}</span></div>
<div class="car-des">lorem ipsum dolor sit amet,</div>
<div class="car-price">{{car.Price}} <span class="sar">{{car.style}}</span></div>
</div>
</div>
下面是我的控制器代码。
function getcadetails(baseurl)
{
debugger;
var arrallcarDetails = new Array();
$http.get(baseurl).success(function (data) {
$.map(data.data, function (item) {
arrallcarDetails.push(item);
});
$scope.carDetails = arrallcarDetails;
// paging $scope.viewby = 10;
$scope.totalItems = $scope.carDetails.length;
$scope.currentPage = 4;
$scope.itemsPerPage = $scope.viewby;
$scope.maxSize = 5; //Number of pager buttons to show
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
console.log('Page changed to: ' + $scope.currentPage);
};
$scope.setItemsPerPage = function (num) {
$scope.itemsPerPage = num;
$scope.currentPage = 1; //reset to first paghe
}
}).error(function (status) {
});
}
下面是样本数据(仅1列)
{"ID":0,"VendorID":0,"make":"HONDA","model":"2012","style":"SEDAN","ODO":null,"VIN":null,"ModelYear":0,"Price":45,"InteriorColor":null,"ExteriorColor":null,"WebImageURL":"http://localhost:49518/App/WebImageURL/yaris.png","TabImageURL":null,"MobileImageURL":null,"IsActive":null,"IsLocked":null,"DateCreated":null,"DateModified":null,"makeID":0,"modelID":0,"styleID":0},
我的问题是arrallcarDetails将持有的所有数据,但在HTML页面中没有任何显示。我可以知道我做错了什么吗?我正在努力弄清楚这个错误。任何帮助,将不胜感激。谢谢。
也许你在你的'.success(..)'函数 – Leguest
由于忘记'$范围。$ apply'。我从ng-repeat中删除了slice(((currentPage-1)* itemsPerPage),((currentPage)* itemsPerPage))并且没有分页工作。那么我在那里失踪了什么? –
嗨Legust我应该使用$ scope。$ apply? –