ニュース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>
任意の助けをいただければ幸いです!
リファレンス現在のアイテムng-repeatは、comit [$ index]ではなく、あなたのテンプレートでcomitを使用します。 –
私はそれを試しましたが、うまくいきませんでした。 –
この 'ng-repeat'の使い方は非常に非効率的です**。 10個の項目の配列の場合、配列を10回ループし、次の2個の項目をループの半分に出力します。つまり、実際には10個の項目に対して20回アクセスすることになります。 – Claies