delete element using ng-repeat and modal

Question

I want to delete element from ng-repeat using modal. this is my view

<table  class="table">
<tr>
<td ng-repeat="u in usersHotel"  ng-show="detail"> ## Heading ##  {{u.hotel.name}}
<i class="fa fa-pencil"></i>
<i class="fa fa-trash-o"   data-toggle="modal" data-target="#myModal">
<div class="modal fade" tabindex="-1" role="dialog" aria-
labelledby="mySmallModalLabel" aria-hidden="true" id="myModal">
 <div class="modal-dialog modal-sm">
 <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">are you sure you want to delete this hotel ?</h4>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-green" id="modal-btn-si" ng-click="deleteUserHotel(u)">Yes</button>
    <button type="button" class="btn btn-default" id="modal-btn-no">No</button>
  </div>
</div>
</div>
</div>
</i>
</td>
</tr>
</table>

this my controller :

$scope.deleteUserHotel = function(userHotel){            
          UsersService.deleteUserHotel(userHotel).then( function(d) {
              $scope.users  = d;
              $scope.getHotelByUserName($scope.newUser.userId);
            },
            function(errResponse){
                console.error('Error while deleting userHotel');
            }
            );
        };

the service.js:

service.deleteUserHotel = function(userHotel){
     var id=userHotel.id;
    return $http.post(_contextPath + '/deleteUserHotel', id ).then(
            function(response) {
                return response.data;
            }, function(errResponse) {
                console.error('Error while deleting UserHotel');
                return $q.reject(errResponse);
            });
};

My problem that this code always delete the first element when i want to delete the second element or third element sorry for this question but i need help .Thanks in advance.

Answer 1

You are creating a modal for each u , but using always the same id for the modal ( myModal ).

When clicking to open the modal, the function searches for the first occurence of a modal with the id which is the same as the data-target attribute. Since they're all the same it opens always the modal of the first row, thus deleting always the first hotel.

You have to dinamically create the id s of your modals and target them based on that id . You can use for instance the $index property of ng-repeat (or better use the id of the u object as in #myModal{{u.id}} iff they're unique in the array):

<table  class="table">
<tr>
    <td ng-repeat="u in usersHotel"  ng-show="detail"> ## Heading ##  {{u.hotel.name}}
        <i class="fa fa-pencil"></i>
        <i class="fa fa-trash-o"   data-toggle="modal" data-target="#myModal{{$index}}">
            <div class="modal fade" tabindex="-1" role="dialog" aria-
                 labelledby="mySmallModalLabel" aria-hidden="true" id="myModal{{$index}}">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">are you sure you want to delete this hotel ?</h4>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-green" id="modal-btn-si" ng-click="deleteUserHotel(u)">Yes</button>
                            <button type="button" class="btn btn-default" id="modal-btn-no">No</button>
                        </div>
                    </div>
                </div>
            </div>
        </i>
    </td>
</tr>
</table>

Note that the data-target of the toggle and the id of the modal both use $index to generate a new modal id .