Correct information not being displayed in modal by using angularJs

Question

When I click on the thumbnail image in the media object, for the race "Australian GP", the modal with its information is opened. But when I click on the thumbnail object for the race "Chinese GP", the modal still shows the information about the Australian GP rather than showing that of the Chinese GP. Where am I going wrong or what more do I have to add? And more importantly, can someone explain to me why my code is not working?

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

Because id="used" repeated twice. id must be unique,be careful. use such this data-target="#ausmod"+race and id="ausmod"+race ng-repeat="race in races"> — Vanya Avchyan
– Vanya Avchyan, Commented Jul 8, 2016 at 14:23
@VanyaAvchyan how does adding +race help? I am not aware how it will work. Could you explain? — SHIVANG AGARWAL
– SHIVANG AGARWAL, Commented Jul 8, 2016 at 14:31
add into scop id (id:1,image:"Aliens.jpg" ... ) after try id="ausmod{{race.id}}" or id="ausmod"{{race.id}}. or if you dont wont adding id,can output what data you have (race.image) — Vanya Avchyan
– Vanya Avchyan, Commented Jul 8, 2016 at 14:40
like this <div class="modal fade" id="ausmod{{race.image}}" ng-repeat="race in races"> — Vanya Avchyan
– Vanya Avchyan, Commented Jul 8, 2016 at 15:03

jbrown · Accepted Answer · 2016-07-08 15:11:07Z

1

The idea is to create a scope variable that is set to the currently selected 'race' on the ng-click of your anchor tags and use that in your modal.

Add to Controller

$scope.selectedRace = {};

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

HTML Changes

Add 'track by $index' to assure unique rows

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

Add ng-click to each anchor

ng-click="setSelectedRace($index)"

Remove ng-repeat from modal div

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

Change modal content to reference selectedRace object rather than race

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

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

Here's a working plunk

answered Jul 8, 2016 at 15:11

jbrown

3,0351 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SHIVANG AGARWAL Over a year ago

why remove ng-repeat from the modal div?

jbrown Over a year ago

There's no need for it since you're only wanting the info for the selected race to show up in the modal.

Vanya Avchyan · Accepted Answer · 2016-07-08 15:31:39Z

I have improved your code.It does not work because in the loop attribute id has to be unique.

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>

Collectives™ on Stack Overflow

Correct information not being displayed in modal by using angularJs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related