ng-repeat 中的 ng-init 只显示最后一项信息 [英] ng-init in ng-repeat shows only the last item info

问题描述

我想遍历这样的项目:

<div class="游戏"><div class="game-row" ng-repeat="预测中的预测" 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 |日期:'d.MM HH:mm'}}</span><span class="versus">{{gameInfo.team1_title}} - {{gameInfo.team2_title}}</span></span><span class="客场标志{{gameInfo.team2_key}}"></span></a>

</节>

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

知道这里出了什么问题吗?

更新:我的 getGame 函数:

$scope.getGame = function (game_id) {$scope.gameInfo = {};$http.get('/games/' + game_id).成功(功能(数据){$scope.gameInfo = 数据；});};

解决方案

您每次都在覆盖 gameInfo.所以当它渲染时，它只显示最后一个三遍.你需要这样做:

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

$scope.getGame = 函数(预测){预测.gameInfo = {};$http.get('/games/' + game_id).成功(功能(数据){预测.gameInfo = 数据；});};

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

例如:

{{gameInfo.play_at |日期:'d.MM HH:mm'}}</span>

会变成

{{prediction.gameInfo.play_at |日期:'d.MM HH:mm'}}</span>

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>

这篇关于ng-repeat 中的 ng-init 只显示最后一项信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！