как я могу создать модальное диалоговое окно в datatable

Question

У меня есть приложение angularJS app.controler с внутренним datatable. в последнем столбце находится кнопка удаления. если я нажимаю эту кнопку, должен появиться модальный диалог с вопросом «Вы действительно хотите удалить этого пользователя?» Это хорошо работает. Но как я могу отобразить имя пользователя в модальном диалоговом окне? и как я могу отправить идентификатор пользователя на backend-контроллер? если я напишу это return '<a class="btn btn-danger btn-sm btn-block" href=/deleteUser?userid=' + data + '>' + ($filter('translate')('delete')) + '</a>'; пользователь будет удален сразу. это мой стол: usertable

модальный диалог: the modal dialog in action (without the username)

это фрагмент в HTML

<div id="myModal" class="modal"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <h2>DELETE USER</h2> 
    </div> 
    <div class="modal-body"> 
    <p>Do you realy want to delete the user? </p> 
    <p>username: ??? </p> 
</div> 
<div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">CANCEL</button> 
    <button type="button" class="btn btn-danger">DELETE</button> 
</div> 
</div> 
</div> 

и это app.controller

app.controller('UsersController',['$translate', '$scope','$filter', '$http', function($translate,$scope, $filter, $http) { 

       $scope.users = []; 
       $http.get('/user').then(function(resp) { 
        $scope.users = resp.data; 
       }); 

       $scope.tableConfig = { 
        columns : [ 
          { 
           data : 'username' 
          }, 
          { 
           data : 'lastname' 
          }, 
          { 
           data : 'firstname' 
          }, 
          { 
           data : 'supplier', 
           render : function(data, type, row, meta) { 
            if (!data || !data.name) { 
             return ''; 
            } 
            return data.name; 
           } 
          }, 
          { 
           data : 'role' 
          }, 
          { 
           //the edit button 
           data : 'id', 
           render : function(data, type, row, meta) { 
            if (!data || !data) { 
             return ''; 
           } 
            return '<a class="btn btn-warning btn-sm btn-block" href=/editUser?userid=' + data + '>' + ($filter('translate')('edit')) + '</a>'; 
           } 

          }, 
          { 
           //the delete button 
           data : 'id', 
           render : function(data, type, row, meta) { 
            if (!data || !data) { 
             return ''; 
           } 
            return '<button type="button" class="btn btn-danger btn-sm btn-block" id="myDELBtn" data-toggle="modal" data-target="#myModal" >DEL</button>' 

           } 
          }, 

        ] 
       } 


      }]); 

Answer 1

Обычно , при действии в контроллерах вы передаете идентификатор объекта; хорошим примером является то, что вы можете сделать ваш HREF/users/delete/5, который вызывает действие контроллера для пользователя №5. Таким образом, у вас будет ID, который должен пройти к контроллеру и получить от него имя пользователя, используя вызов AJAX.

Answer 2

/** 
     * @Function to delete a user. 
     */      
     $scope.deleteConfirmation = function(size) { 

       var modalInstance = $modal.open({ 
         templateUrl : 'views/userManagement/gxDeleteMessagePopup.html', 
         controller : ModalInstanceCtrlForDelete, 
         size : size, 
         resolve : { 
          dataSelect : function() { 
           return $scope; 
          } 
         } 
        }); 
       modalInstance.result.then(function(selectedItem) { 
        },function() { 
       }); 
     }; 


     //Added controller for delete message modal pop up 
     var ModalInstanceCtrlForDelete = function($scope, $modalInstance,dataSelect) { 
      $scope.dataSelect = dataSelect; 
       $scope.ok = function() {  

         Service.deleteUser(dataSelect.gridOptions.user); 
        $modalInstance.close();  
        $state.go('home.Manage Users'); 
       }; 

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

       }; 
       };