Modal Bootstrap和ng-repeat对我不起作用

I want to add a modal for my every name of my hotel in my list using ng-repeat unfortunatly it dosen't work for me.and Idon't understand where is exactly the problem. This is my code:

我想在我的列表中使用ng-repeat为我酒店的每个名字添加一个模态，不幸的是它不适合我。我不明白问题究竟在哪里。这是我的代码：

<table class="details" >                
            <tr>
                <td class="leftDetails">Hotel</td>
                <td class="rightDetails">
                <div   ng-dropdown-multiselect="" options="hotelsData"  selected-model="hotelModel" ng-init="h=hotelModel"  extra-settings="hotelSettings" >
                </div>
                </td>
            </tr>               
        </table>
<table class="details4">
<tr>
    <td class="leftDetails4">Add new link</td>
    <td class="rightDetails4"><span class="btn-gray" ><a href>Link this contact to...</a></span></td>
</tr>
<tr >
    <td class="leftDetails4">Hotel</td>
    <td  class="rightDetails4" ng_repeat="hotel in hotelModel"  >
<a  href="#" data-toggle="modal" data-target="#myModal">{{hotel}}</a>
<div id="myModal" class="modal fade" role="dialog">
         <div class="modal-dialog">
                <div class="modal-content">
                     <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <p>Some text in the modal.</p>
                    </div>
                    <div class="modal-footer">
                           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
        </div>
</div>
    <i class="fa fa-pencil"></i>
    <i class="fa fa-trash-o" ng-click="deleteHotel()"></i>  
     </td>   
   </tr>

2 个解决方案

#1

That's wrong!

那是错的！

First of all, you have to get the model out of the ng_repeat loop because the model for instance has an ID and there shouldn't be elements that has the same ID in the same page, so by doing a ng-repeat loop you'll create multiple modals with the same ID
首先，你必须从ng_repeat循环中获取模型，因为例如模型有一个ID，并且不应该在同一页面中具有相同ID的元素，所以通过执行ng-repeat循环你' ll创建具有相同ID的多个模态
Second of all, you don't need multiple modals, you need just one, if you want to pass data to it, just insert a variable in the modal, and when you click on the row to trigger it you pass the data from the row to the modal, and voilà.
其次，您不需要多个模态，只需要一个，如果要将数据传递给它，只需在模态中插入一个变量，当您单击该行以触发它时，您需要传递数据。划到模态，然后瞧。
Note: you're missing the </table> close tag, and you didn't use for semantics wise,
注意：您缺少关闭标记，并且您没有明确地使用语义，

Hope it helps.

希望能帮助到你。

#2

use $modal directive


requestModalInstance = $modal.open({
        templateUrl : 'views/modal/model.html',
        controller : ModalInstanceCtrl,   
        backdrop: 'static',
        scope : $scope     
}); 

function ModalInstanceCtrl($scope, $modalInstance) {
   $scope.ok = function() {
        $modalInstance.close();
    };

    $scope.cancelModal = function() {
        $modalInstance.dismiss('cancel');
    };
}

#1