使用nginfinitesscroll从远程源输出JSON

Using ngInfiniteScroll to output JSON from a remote source

本文关键字：输出 JSON 程源 nginfinitesscroll 使用      更新时间：2023-09-26

我使用AngularJS 1.4制作了一个小应用程序，它从远程源输出JSON数据。

下面是JSON数据

这是我的观点- nginfinitesscroll的链接出现在container的顶部:

<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>

我试图使用nginfinitesscroll错开加载和输出数据。我只是不确定它是如何工作的:

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;
});

这是Codepen上的程序链接。与ngInfiniteScroll (controller和factory)相关的代码目前被注释掉，以支持工作版本，但这当然会一次加载所有链接。

为了使JSON逐渐加载，我需要在我的factory中插入什么?

据我所知，通过查看FreeCodeCamps的故事路线，没有办法查询"热点新闻"故事的特定范围。

它看起来只是返回json与固定的100层限制。

  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
    );
  }

您可以对它返回的故事使用infinite scroll，以便在滚动时以块的形式显示从请求中检索到的本地数据。

相关文章：