Question

我制作了一个小程序，该程序应该根据给定的数组长度通过API依次获取数据。我有一个按钮，单击该按钮可遍历数组。

这里是Angular控制器：

 angular.module('LoadingBarExample', ['chieffancypants.loadingBar',
     'ngAnimate'
 ])
 .config(function(cfpLoadingBarProvider) {
     cfpLoadingBarProvider.includeSpinner = true;
 })
 .controller('ExampleCtrl', function($scope, $http, $timeout, cfpLoadingBar) {
         $scope.posts = [];
         $scope.test = 0;
         $scope.section = null;
         $scope.subreddit = null;
         $scope.subreddits = ['cats', 'pics', 'funny', 'gaming', 'AdviceAnimals',
             'aww'
         ];
         var getRandomSubreddit = function() {
             // var sub = $scope.subreddits[Math.floor(Math.random() * $scope.subreddits.length)];
             if ($scope.test > $scope.subreddits.length - 1) {
                 $scope.test = 0
             }
             var sub = $scope.subreddits[$scope.test];
             // console.log($scope.subreddits[$scope.test])

             $scope.test++;



             // ensure we get a new subreddit each time.
             if (sub == $scope.subreddit) {
                 return getRandomSubreddit();
             }

             return sub;
         };

         $scope.fetch = function() {

             $scope.subreddit = getRandomSubreddit();
             $http.jsonp('http://www.reddit.com/r/' + $scope.subreddit + '.json?limit=50&jsonp=JSON_CALLBACK').success(function(data) {
                 $scope.posts = data.data.children;
             });

         };

这是HTML：

<a href="#" class="btn btn-primary btn-lg" ng-click="fetch()"><i class="glyphicon glyphicon-play-circle"></i> Start Service <span> (User Arrive)</span></a>
</div>
</div>

<h4 class="loading-text" ng-show="subreddit">Showing 100 results for: <span>/r/{{subreddit}}...</span></h4>
<div ng-repeat="post in posts" class="panel panel-default">
    <div class="panel-body media">
        <span class="badge pull-right">{{post.data.score}}</span>
        <div class="pull-left" ng-if="post.data.thumbnail">
            <img class="thumbnail" ng-src="{{post.data.thumbnail}}">
        </div>
        <div class="">
            <div class="">
                <a href="{{post.data.url}}">{{post.data.title}}</a>
                <p class="meta">by {{post.data.author}}</p>
                <p class="meta-comments">{{post.data.num_comments}} comments</p>
            </div>
        </div>
    </div>
</div>

我想按一次按钮，并且提取将继续显示直到数组长度

谢谢

Answer 1

每次打电话时您都将替换帖子数据。

替换$scope.posts = data.data.children; $scope.posts = $scope.posts.concat(data.data.children);中添加帖子而不是替换。

如果您希望获取函数的运行次数与$scope.subreddits数组中子索引的运行次数相同，则可以将fetch()更改为以下内容：

$scope.fetch = function() {
for (i = 0; i < $scope.subreddits.length; i++) {
    $scope.subreddit = getRandomSubreddit();
    $http.jsonp('http://www.reddit.com/r/' + $scope.subreddit + '.json?limit=50&jsonp=JSON_CALLBACK').success(function (data) {
        $scope.posts = $scope.posts.concat(data.data.children);
    });
}};

我怎样才能使角度递归

1 个答案: