AngularJS+Spring MVC如何将表格记录数据传入模态框编辑？

安全阿岳

2026-5-20

我来帮你解决这个问题！在Spring MVC + AngularJS的项目里，把表格行的记录传到模态框编辑是非常常见的需求，咱们一步步来实现：

核心思路

给表格的编辑按钮绑定点击事件，传递当前行的记录对象
在AngularJS控制器中存储当前要编辑的记录
模态框通过双向绑定直接使用这个记录对象，完成编辑后再同步回原列表（或提交到Spring后端）

完整代码示例

1. 表格部分（补全你的代码）

<table class="table table-hover table-responsive">
  <thead class="table-striped">
    <th>Email</th>
    <th>Nombre</th>
    <th>Apellidos</th>
    <th>Rol</th>
    <th>Acciones</th> <!-- 新增操作列 -->
  </thead>
  <tbody>
    <!-- 用ng-repeat遍历用户列表，每一行绑定编辑事件 -->
    <tr ng-repeat="user in userList">
      <td>{{user.email}}</td>
      <td>{{user.nombre}}</td>
      <td>{{user.apellidos}}</td>
      <td>{{user.rol}}</td>
      <td>
        <button class="btn btn-sm btn-primary" ng-click="openEditModal(user)">Editar</button>
      </td>
    </tr>
  </tbody>
</table>

2. AngularJS控制器代码（结合AngularUI Bootstrap模态框，最常用方案）

angular.module('yourAppModule', ['ui.bootstrap'])
.controller('UserController', function($scope, $uibModal, $http) {
  // 假设这是从Spring MVC后端获取的用户列表（可通过$http.get('/api/users')获取）
  $scope.userList = [
    {email: 'alberto@example.com', nombre: 'Alberto', apellidos: 'Martinez', rol: 'Admin'},
    {email: 'maria@example.com', nombre: 'Maria', apellidos: 'Garcia', rol: 'User'}
  ];

  // 存储当前正在编辑的用户对象
  $scope.currentEditingUser = {};

  // 打开编辑模态框的方法
  $scope.openEditModal = function(user) {
    // 深拷贝用户对象，避免直接修改原列表数据（推荐操作）
    $scope.currentEditingUser = angular.copy(user);

    // 打开模态框
    const modalInstance = $uibModal.open({
      templateUrl: 'edit-user-modal.html', // 模态框模板路径
      scope: $scope, // 共享当前控制器作用域，模态框可直接访问currentEditingUser
      size: 'md'
    });

    // 模态框关闭后的回调逻辑
    modalInstance.result.then(
      // 用户点击"保存"时执行
      () => {
        // 提交修改到Spring MVC后端
        $http.put(`/api/users/${$scope.currentEditingUser.email}`, $scope.currentEditingUser)
          .then(() => {
            // 成功后更新前端列表
            const targetIndex = $scope.userList.findIndex(u => u.email === $scope.currentEditingUser.email);
            if (targetIndex !== -1) {
              $scope.userList[targetIndex] = angular.copy($scope.currentEditingUser);
            }
          });
      },
      // 用户点击"取消"时执行
      () => {
        // 清空编辑对象，避免残留数据
        $scope.currentEditingUser = {};
      }
    );
  };
});

3. 模态框模板（edit-user-modal.html）

<div class="modal-header">
  <h4 class="modal-title">Editar Usuario</h4>
  <button type="button" class="close" ng-click="$dismiss('cancel')">
    <span>&times;</span>
  </button>
</div>
<div class="modal-body">
  <form class="needs-validation" novalidate>
    <div class="form-group">
      <label>Email</label>
      <input type="email" class="form-control" ng-model="currentEditingUser.email" readonly>
    </div>
    <div class="form-group">
      <label>Nombre</label>
      <input type="text" class="form-control" ng-model="currentEditingUser.nombre" required>
    </div>
    <div class="form-group">
      <label>Apellidos</label>
      <input type="text" class="form-control" ng-model="currentEditingUser.apellidos" required>
    </div>
    <div class="form-group">
      <label>Rol</label>
      <select class="form-control" ng-model="currentEditingUser.rol" required>
        <option value="Admin">Admin</option>
        <option value="User">User</option>
      </select>
    </div>
  </form>
</div>
<div class="modal-footer">
  <button class="btn btn-secondary" ng-click="$dismiss('cancel')">Cancelar</button>
  <button class="btn btn-primary" ng-click="$close('save')">Guardar Cambios</button>
</div>

关键细节说明

深拷贝对象：用angular.copy(user)而不是直接赋值，是为了避免在模态框中修改时实时影响原列表，只有用户确认保存后才同步变更。
作用域共享：通过scope: $scope让模态框直接使用控制器的变量，无需额外传递参数。
后端交互：保存时调用Spring MVC的PUT接口，后端需要对应编写接收用户对象的Controller方法。

如果你用的是原生Bootstrap模态框而非AngularUI，只需把控制器中打开模态框的逻辑改成操作DOM显示/隐藏，再绑定保存按钮的点击事件即可，核心数据传递逻辑是一致的。

内容的提问来源于stack exchange，提问作者Alberto