我使用 AngularJS 1.4 制作了一个小型应用程序，它从远程源输出 JSON 数据。
Here is the JSON data in question.
这是我的观点 - 链接到 ngInfiniteScroll位于容器的顶部:
<body ng-app="cn" ng-controller="MainCtrl as main">
<div id="header" class="container-fluid">
<p>Camper News</p>
</div>
<div class="container">
<div infinite-scroll="feed.loadMore()" infinite-scroll-distance="3">
<div ng-repeat="newsItem in myData" class="news-row col-sm-12 col-xs-12">
<div class="col-sm-2 col-xs-12">
<div id="img-container">
<img ng-src={{newsItem.author.picture}} id="user-avatar" />
</div>
</div>
<div class="news-text col-sm-10 col-xs-12">
<a href={{newsItem.link}}><em>{{newsItem.headline}}</em></a>
</div>
<div class="col-sm-10 col-xs-12" id="link-description">
{{newsItem.metaDescription}}
</div>
<div class="col-sm-12 col-xs-12" id="bottom-text">
<div class="col-sm-4 col-xs-12" id="author">
<a href='http://www.freecodecamp.com/{{newsItem.author.username}}'>{{newsItem.author.username}}</a>
</div>
<div class="col-sm-4 col-xs-12" id="likes">
<i class="fa fa-thumbs-o-up"></i> {{newsItem.upVotes.length}}
</div>
<div class="col-sm-4 col-xs-12" id="timestamp">
<span am-time-ago={{newsItem.timePosted}} | amFromUnix></span>
</div>
</div>
</div>
</div>
</div>
</body>
我正在尝试使用 ngInfiniteScroll 错开数据的加载和输出。我只是不确定它是如何工作的:
app.controller('MainCtrl', function($scope, Feed) {
$scope.feed = new Feed();
});
app.factory('Feed', function($http) {
var Feed = function() {
this.items = [];
this.after = '';
};
Feed.prototype.loadMore = function() {
var url = "http://www.freecodecamp.com/news/hot";
$http.get(url).success(function(data) {
var items = data;
// Insert code to append to the view, as the user scrolls
}.bind(this));
};
return Feed;
});
Here is a link to the program on Codepen.与 ngInfiniteScroll(controller 和 factory)相关的代码目前已被注释掉，以支持工作版本，但这当然会立即加载所有链接。
我需要在我的 factory 中插入什么才能使 JSON 逐渐加载？
最佳答案
据我所知，通过查看 FreeCodeCamps' story routes ，无法查询特定范围的“热点新闻”报道。
它看起来只是返回具有固定 100 个故事限制的 json。
function hotJSON(req, res, next) {
var query = {
order: 'timePosted DESC',
limit: 1000
};
findStory(query).subscribe(
function(stories) {
var sliceVal = stories.length >= 100 ? 100 : stories.length;
var data = stories.sort(sortByRank).slice(0, sliceVal);
res.json(data);
},
next
);
}
您可以对它返回的故事使用无限滚动，以显示您从 chunks as you scroll 中的请求检索到的本地数据。 。
关于javascript - 使用 ngInfiniteScroll 从远程源输出 JSON，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32637748/