2017-07-17 5 views
-1

ニュースAPIからデータを取得するanglejsを使用してミニアプリを開発しています。私はforループ(以下)を使って、10のニュースソース(すべてapiによって提供される)の配列から10の配列を得ることに成功しました。問題は、ビューのng-repeatがループの最後の反復のみを表示することです。すべての反復を表示するにはどうしたらいいですか?ここforループでng-repeatとapi jsonを使用する

はコントローラです:

angular.module('newsApp',[]) 
    .controller('newsController',['$scope','$http', function($scope,$http){ 

    var index = 0; 
    var sortby = ['top','latest','popular']; 

    $http.get('https://newsapi.org/v1/sources?language=en').then(function(response){ 
     var sourceIdArray = []; 
     var articlesArray = []; 

     for (var i = 0; i < 9; i++) { 
     $scope.getId = response.data.sources[i].id; 
     sourceIdArray.push($scope.getId); 




     $http.get(' https://newsapi.org/v1/articles?source=' + sourceIdArray[i] + '&apiKey=53bec2b512724f58b92203f0f7e93dc1').then(function(response){ 
     $scope.comits = response.data.articles 
     articlesArray.push($scope.comits); 
     }); 

     } 


    }) 



    }]) 

だけではなく最後の繰り返し

のループは私に必要なすべての記事を与えますが、私はすべてのデータを表示するには、NG-繰り返しの書き方を知りません

とhtml:

<div class="row rowdiv" ng-repeat="comit in comits" ng-if="$index % 2 == 0"> 
     <div class="col-md-6"> 
      <img ng-src="{{comits[$index].urlToImage}}" alt=""> 
      <h3><a ng-href="{{comits[$index].url}}">{{comits[$index].title}}</a></h3> 
      <p>{{comits[$index].description}}</p> 
      <h5>{{result}} {{comits[$index].author}}</h5> 
      <h6 class="pull-right">{{comits[$index].publishedAt}}</h6> 


     </div> 

     <div class="col-md-6"> 
      <img ng-src="{{comits[$index +1].urlToImage}}" alt=""> 
      <h3><a ng-href="{{comits[$index +1].url}}">{{comits[$index +1].title}}</a></h3> 
      <p>{{comits[$index + 1].description}}</p> 
      <h5>{{result}} {{comits[$index + 1].author}}</h5> 
      <h6 class="pull-right">{{comits[$index +1].publishedAt}}</h6> 


     </div> 

     </div> 

任意の助けをいただければ幸いです!

+0

リファレンス現在のアイテムng-repeatは、comit [$ index]ではなく、あなたのテンプレートでcomitを使用します。 –

+0

私はそれを試しましたが、うまくいきませんでした。 –

+0

この 'ng-repeat'の使い方は非常に非効率的です**。 10個の項目の配列の場合、配列を10回ループし、次の2個の項目をループの半分に出力します。つまり、実際には10個の項目に対して20回アクセスすることになります。 – Claies

答えて

0

articlesArray.push($ scope.comits);でアーティクルをarticlesArrayにプッシュしています。

articlesArrayを$ scopeのメンバーにして、ng-repeatでアクセスする必要があります。 $ scope.comitsには、コードに基づいて取得された最後の記事のみが含まれます。

または$ scope.comits.pushに$ scope.comits = []次に、変更$ scope.comits = response.data.articlesとしてcomitsを宣言する(response.data.articles)

関連する問題