CODEWITHSUNDEEP
angularjstwitter-bootstrapbootstrap-modal
irfan shafi
irfan shafi

Reputation: 524

ng-repeat strange behaviour with boostrap modal

i am trying to change the modal header and modal body text with the ng-repeat but the modal heading and data always point to the first array even though the the data is traversed in the anchor tag 

<table>
  <tr ng-repeat="x in records">
  <td> <a ng-href="" data-toggle="modal" data-target="#myModal">{{x}}</a>
  <div class="modal fade" id="myModal" 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">{{x}}</h4>
  </div>
  <div class="modal-body">
  <p>{{x}}</p>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-
  dismiss="modal">Close</button>
  </div>
  </div>

  </div>
  </div>
  </td>
  </tr>
  </table>

the value of x

<td> <a ng-href="" data-toggle="modal" data-target="#myModal">{{x}}</a>

in anchor tag is according to the array showing all element but the value of x in the below code

<h4 class="modal-title">{{x}}</h4>

and in the modal body always points to the first element of array

<p>{{x}}</p>

the value of X should change everywhere asper the array

Upvotes: 0

Views: 65

Answers (1)

Martin Ad&#225;mek
Martin Ad&#225;mek

Reputation: 18389

Problem is with the modal id attribute, you have the same id for all modals, so when you try to open the modal, it will always open the same (first) one.

Use the $index variable inside the id attribute to make it unique:

<a ng-href="" data-toggle="modal" data-target="#myModal-{{$index}}">{{x}}</a>
<div class="modal fade" id="myModal-{{$index}}" role="dialog">

Upvotes: 2

Related Questions