ng-repeat boostrapモーダルで奇妙な振る舞い

Question

ng-repeatでモーダルヘッダーとモーダル本体のテキストを変更しようとしていますが、データがアンカーでトラバースされていても、モーダル見出しとデータは常に最初の配列を指しますタグ

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

は、アンカータグでX

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

の値は、すべての要素が、以下のコード

におけるxの値 を示す配列に従います3210

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

とモーダル体内に常にXの値が

Answer 1

問題がモーダルid属性である配列アスパーどこにでも変更する必要があります

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

配列の最初の要素を指し、あなたが持っていますすべてのモーダルで同じidなので、モーダルを開こうとすると、常に同じ（最初の）ものが開きます。

は、それを一意にするためにid属性内$index変数を使用します。

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