bafix2203 bafix2203 - 2 months ago 11
AngularJS Question

AngularJS ng-repeat in modal

I have problem - i wan't to show in modal details of each person - About the one I click the button in table. But i have details of everyone.
My code:

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Details</h4>
<div class="modal-body">

<ul ng-repeat="person in people">

<li> {{person.details}}</li>


<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>


<thead style="background-color: lightgray;">

<tr ng-repeat="person in people">

<button data-toggle="modal" data-target="#myModal" title="Layers" type="button" class="btn btn-default"><span class="glyphicon glyphicon-menu-hamburger"></span>


My plunker:

Thanks for answers in advance!

Answer Source

You are displaying each person's detail with ngRepeat change that and display single person detail for reference see this:

In modal do as :

 <div class="modal-body">
       <li> {{person.details}}</li>                            

In script add :

   $scope.showDetails = function(person){
            $scope.person = person;

And call above function as :

  <button ng-click="showDetails(person)" title="Layers" type="button" class="btn btn-default"><span class="glyphicon glyphicon-menu-hamburger" ></span></button>