我怎样才能使角度递归

Question

I made a small program that supposed to make fetch data through an API sequentially based on a given array length. I have a button which iterates through the array when clicked.

Here is the Angular controller:

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

         };

and this is the 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>

I want to press the button once and the fetch should continue to display until the array length

Thanks

Answer 1

You are replacing your posts data every time you make you call.

Replace $scope.posts = data.data.children; with $scope.posts = $scope.posts.concat(data.data.children); to append posts rather than replace.

If you want your fetch function to run as many times as you have subreddits in your $scope.subreddits array then you can change fetch() to the following:

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