javascript - 使用 angularJs 未在模态中显示正确的信息

Question

当我单击媒体对象中的缩略图时，对于“澳大利亚大奖赛”比赛，将打开包含其信息的模式。但是当我点击“中国大奖赛”比赛的缩略图对象时，模式仍然显示有关澳大利亚大奖赛的信息，而不是显示中国大奖赛的信息。我哪里出错了或者我还需要补充什么？更重要的是，有人可以向我解释为什么我的代码不起作用吗？

<div class="container" ng-controller="seasonCtrl">
        <div class="row" ng-repeat="race in races">
            <div class="col-md-12">
                <div class="media first-media">
                    <div class="media-left media-middle">
                        <a href="#" data-toggle="modal" data-target="#ausmod"><img src="{{race.image}}" class="img-thumbnail media-object"></a>
                    </div>
                    <div class="media-body">
                        <h2 class="media-heading"><a data-toggle="modal" data-target="#ausmod">{{race.name}}</a> &nbsp;&nbsp;<label class="label label-pill label-success">{{race.p1}}</label>&nbsp;&nbsp;&nbsp;<label class="label label-pill label-primary">{{race.p2}}</label>&nbsp;&nbsp;&nbsp;<label class="label label-info label-pill">{{race.p3}}</label></h2>
                        <a href="#" data-toggle="modal" data-target="#ausmod"><p>{{race.smallinfo}}</p></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="ausmod" ng-repeat="race in races">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4>{{race.modalName}}</h4>
                    </div>
                    <div class="modal-body">
                        <p>{{race.modalDesc}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script>
var app=angular.module("seasonApp", []);
        app.controller("seasonCtrl", ["$scope", function($scope){
            $scope.races=[
                {
                    image:"Aliens.jpg",
                    name:"Australian GP",
                    p1:"Nico Rosberg",
                    p2:"Lewis Hamilton",
                    p3:"Sebastian Vettel",
                    smallinfo:"wgliu uyrgf pw77t 2ieugt9weud w87e7t d",
                    modalName:"Australian GP 2016",
                    modalDesc:"test info for australia"
                },
                {
                    image:"daily_tasks.jpg",
                    name:"Chinese GP",
                    p1:"Nico Rosberg",
                    p2:"Sebastian Vettel",
                    p3:"Daniil Kvyat",
                    smallinfo:"wgliu uyrgf pw77t 2ieugt9weud w87e7t d",
                    modalName:"Chinese GP 2016",
                    modalDesc:"test info"
                }
            ];
        }]);
    </script>

Answer 1

这个想法是创建一个范围变量，该变量设置为 anchor 标记的 ng-click 上当前选择的“race”，并在模态中使用它。

添加到 Controller

$scope.selectedRace = {};

$scope.setSelectedRace = function(idx) {
  $scope.selectedRace = $scope.races[idx];
};

HTML 更改

添加“track by $index”以确保唯一的行

<div class="row" ng-repeat="race in races" track by $index>

为每个 anchor 添加 ng-click

ng-click="setSelectedRace($index)"

从模态 div 中删除 ng-repeat

<div class="modal fade" id="ausmod">

更改模式内容以引用 selectedRace 对象而不是 race

<h4>{{selectedRace.modalName}}</h4>

<p>{{selectedRace.modalDesc}}</p>

这是一个工作 plunk