我正在搞乱离子和使用运球数据只是为了玩。我不确定如何A.我可以查询运球以显示超过前15的帖子,api在这里http://api.dribbble.com/shots/everyone如果我想获得更多,我可以请求第2页,如http://api.dribbble.com/shots/everyone?page=2
B中。如何将项目传递到模板而不与旧项目冲突?
/**
* Dashboard Controller. (must be authenticated)
*
*/
.controller('DashController', function($scope, $state, DribbbleData, $http) {
$scope.items = [];
$scope.initialize = function() {
DribbbleData.getData().then(function(res) {
console.log(res);
$scope.items = res.data.shots;
}, function(status) {
console.log('error')
})
}
$scope.loadMore = function() {
$http.jsonp('http://api.dribbble.com/shots/everyone?callback=JSON_CALLBACK').success(function(items) {
console.log(items);
var test = $scope.items;
console.log(test)
//$scope.items = items;
//useItems(items);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.$on('$stateChangeSuccess', function() {
$scope.loadMore();
});
$scope.initialize();
})
视图
<ion-view view-title="Dashboard">
<ion-content class="padding">
<ion-list>
<div class="list card" data-ng-repeat="item in items">
<div class="item item-title">
<h2>{{item.title}}</h2>
</div>
<div class="item item-body">
<img class="full-image" ng-src="{{item.image_url}}">
<p>
<a href="#" class="subdued">{{item.likes_count}} Like</a>
<a href="#" class="subdued">{{item.comments_count}} Comments</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
</ion-list>
<ion-infinite-scroll on-infinite="loadMore()" distance="1%">
</ion-infinite-scroll>
</ion-content>
</ion-view>
答案 0 :(得分:4)
如果你确定没有重复项,只需连接项目:
$scope.items = $scope.items.concat(items);
如果不是,最好的办法是跟踪列表中当前的项目,并仅在它不存在时添加:
var itemIds = {};
function addItems(items) {
items.forEach(function (item) {
if (itemsIds[item.id]) {
return;
}
$scope.items.push(item);
itemIds[item.id] = true;
}
}
要处理分页,只需在成功回调中增加一个计数器。例如:
var nextPage = 2;
$scope.loadMore = function() {
$http.jsonp('http://api.dribbble.com/shots/everyone?callback=JSON_CALLBACK&page=' + nextPage).success(function(items) {
nextPage++;
addItems(items);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
答案 1 :(得分:0)
当ajax完成时,您想要将新项目添加到$scope.items
数组
$scope.loadMore = function() {
$http.jsonp('http://api.dribbble.com/shots/everyone?callback=JSON_CALLBACK').success(function(items) {
// Add all the new items
items.forEach(function(newItem) {
$scope.items.push(newItem);
});
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};