Daten werden nicht korrekt im Modal angezeigt

Question

Ich erhalte zwei Werte in zwei Zeilen wie angenommen, {{x.room_type}} zeigt A in Zeile 1 und B in Zeile 2 an. Das href schaltet ein Modal um, das zusätzliche Daten zu A anzeigt, wenn ich auf die A-Zeile klicke und zusätzliche Daten über B, wenn auf die Zeile B geklickt wird.

Aber das Modal zeigt die Details von nur A, wenn ich auf den Link in beiden Zeilen klicke.

Hier ist der modale

<div class="modal" id="room_detail" ng-repeat="x in roomdata.data"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type = "button" class="btn btn-danger pull-right" data-dismiss="modal">&times;</button> 
       <h3>{{x.room_type}} - {{current_Hotel.hotel_name}}</h3> 
       <a href="" ng-click="show = 'desc'">Descriptions</a> 
       <a href="" ng-click="show = 'pictures'">Room Pictures</a> 
       <a href="" ng-click="show = 'amenities'">Amenities</a> 
       <a href="" ng-click="show = 'others'">Others</a> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Sie {{$index}} an Ihre ID anhängen können und um es funktioniert, fügen Sie es in data-toggle auch. Etwas wie folgt aus:

<div class="modal" id="room_detail{{$index}}" ng-repeat="x in roomdata.data"> 

Und die modale Opener wie

<a href="#" data-toggle="modal" data-target="#room_detail{{$index}}" ...> 
    Room Details 
</a> 

So wäre, jetzt alle der Modalverben haben eindeutige IDs, die uns ihnen unterscheiden helfen.

Hier working example