如何在数据表中创建模式对话框

Question

我有一个 angularJS app.controler，里面有一个数据表。最后一列是删除按钮。如果我按下这个按钮，应该会出现一个带有问题的模式对话框“你真的要删除这个用户吗？” 那工作正常。 但是如何在模式对话框中显示用户名？ 以及如何将用户 ID 发送到后端控制器？ 如果我写这个 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中的sn-p

 <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

通常，在控制器中的操作中，您传递实体的 ID；一个很好的例子是您可以将 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');

                };
                };