I want to loop through items like this:
<section class="col-sm-4" data-ng-controller="PredictionsController" data-ng-init="findMyPredictions()">
<div class="games">
<div class="game-row" ng-repeat="prediction in predictions" ng-init="getGame(prediction.game_id)">
<a class="button primary alt block" href="#!/predictions/{{prediction._id}}">
<span class="home flag {{gameInfo.team1_key}}"></span>
<span class="middle">
<span class="date">{{gameInfo.play_at | date: 'd.MM HH:mm'}}</span>
<span class="versus">{{gameInfo.team1_title}} - {{gameInfo.team2_title}}</span>
</span>
<span class="away flag {{gameInfo.team2_key}}"></span>
</a>
</div>
</div>
</section>
But the output is just X times the same info: Although the request is done correctly:
Any idea what is wrong here?
UPDATE: My getGame function:
$scope.getGame = function (game_id) {
$scope.gameInfo = {};
$http.get('/games/' + game_id)
.success(function (data) {
$scope.gameInfo = data;
});
};
You are overwriting gameInfo
every time. So by the time it renders, it is just showing the last one three times. You need to do it more like:
<div class="game-row" ng-repeat="prediction in predictions" ng-init="getGame(prediction)">
notice we pass in the prediction
object, not just the id. And then you can do:
$scope.getGame = function (prediction) {
prediction.gameInfo = {};
$http.get('/games/' + game_id)
.success(function (data) {
prediction.gameInfo = data;
});
};
And thin in your html, instead of gameInfo.whatever
you will do prediction.gameInfo.whatever
, that way each prediction has it's own variable, and you aren't overwriting your single copy of that variable.
For example:
<span class="date">{{gameInfo.play_at | date: 'd.MM HH:mm'}}</span>
would become
<span class="date">{{prediction.gameInfo.play_at | date: 'd.MM HH:mm'}}</span>