ng-init in ng-repeat shows only the last item info

Algeron picture Algeron · Jun 11, 2014 · Viewed 10.2k times · Source

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: enter image description here Although the request is done correctly: enter image description here

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

};

Answer

dave picture dave · Jun 12, 2014

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>