ng-repeat中的ng-init仅显示最后一项信息

Question

我想循环遍历这样的项目:

<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>

但输出只是相同信息的X倍: 虽然请求正确完成:

知道这里有什么问题吗？

更新:我的getGame功能:

$scope.getGame = function (game_id) {
    $scope.gameInfo = {};
    $http.get('/games/' + game_id)
    .success(function (data) {
        $scope.gameInfo = data;
    });

};

Answer 1

你gameInfo每次都要覆盖.因此,当它呈现时,它只是显示最后一次三次.你需要做的更像:

<div class="game-row" ng-repeat="prediction in predictions" ng-init="getGame(prediction)">

注意我们传入的是prediction对象,而不仅仅是id.然后你可以这样做:

$scope.getGame = function (prediction) {
  prediction.gameInfo = {};
  $http.get('/games/' + game_id)
  .success(function (data) {
    prediction.gameInfo = data;
  });
};

并且在你的html中,而不是gameInfo.whatever你会做prediction.gameInfo.whatever,这样每个预测都有它自己的变量,你不会覆盖你的变量的单个副本.

例如:

<span class="date">{{gameInfo.play_at | date: 'd.MM HH:mm'}}</span>

会成为

<span class="date">{{prediction.gameInfo.play_at | date: 'd.MM HH:mm'}}</span>