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>
<div class="modal-body">

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

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

</ul>

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

</div>
</div>

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

<td>Name</td>
<td>Gender</td>
<td>Details</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in people">

<td>{{person.name}}</td>
<td>{{person.gender}}</td>
<td>
<button data-toggle="modal" data-target="#myModal" title="Layers" type="button" class="btn btn-default"><span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
</td>
</tr>

</tbody>
</table>


My plunker: http://plnkr.co/edit/g1t4pludTTIAJYKTToCK?p=preview

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:

http://plnkr.co/edit/CLMjfcAhNibJugivRw8N?p=preview

In modal do as :

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

In script add :

   $scope.showDetails = function(person){
            $scope.person = person;
            $('#myModal').modal('show');
    }

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>