ng-repeat seltsames Verhalten mit Boostrap modal

Question

Ich versuche, den modalen Header und modalen Text mit der Ng-Wiederholung zu ändern, aber die modale Überschrift und Daten zeigen immer auf das erste Array, obwohl die Daten im Anker durchlaufen werden etikettieren

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

den Wert von x

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

in Ankertag wird entsprechend der Array alle Elements zeigt aber den Wert von x in untenstehenden Code

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

und im Modal Körper zeigt immer auf das erste Element des Array

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

der Wert von X sollte überall

Answer 1

Problem ist mit dem modalen id Attribut asper Array ändern, müssen Sie die Gleiches id für alle Modale, also, wenn Sie versuchen, das modale zu öffnen, öffnet es immer das gleiche (erste).

Verwenden Sie die $index Variable innerhalb des id Attribut, um es einzigartig zu machen:

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