使用angularJs不能以模态显示正确的信息

Question

当我单击媒体对象中的缩略图时，对于种族“ Australian GP”，将打开包含其信息的模态。但是，当我单击种族“ Chinese GP”的缩略图对象时，模态仍然显示有关澳大利亚GP的信息，而不是显示中国GP的信息。我在哪里错了，或者我还要补充什么？更重要的是，有人可以向我解释为什么我的代码无法正常工作吗？

<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

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

添加到控制器

$scope.selectedRace = {};

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

HTML更改

添加'通过$ index跟踪以确保唯一行

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

向每个锚点添加ng-click

ng-click="setSelectedRace($index)"

从模式div删除ng-repeat

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

将模式内容更改为引用selectedRace对象而非种族

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

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

这里是工作plunk

Answer 2

我改进了您的代码。由于循环属性id必须是唯一的，因此无法正常工作。

Controllr

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

HTML

<div class="container" ng-controller="seasonCtrl">
    <div class="row" ng-repeat="race in races">
        <div class="col-md-12">
            <div class="media first-media" track by $index>
                <div class="media-left media-middle">
                    <a href="#" data-toggle="modal" data-target="#ausmod{{$index}}">AAA</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{{$index}}" ng-repeat="race in races" track by $index>
        <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>