如何在Angular 7中实现表格多行批量更新功能？

咱来一步步实现这个带批量编辑和更新的弹窗功能哈，完全基于AngularJS来做，和你提到的示例功能完全匹配：

1. 定义核心数据结构 #

首先在控制器里初始化要渲染的数据数组，每个条目需要包含id（用于唯一标识）、displayText（静态显示文本）、isEditable（标记是否启用编辑）、inputValue（绑定输入框的值）：

angular.module('myApp', [])
  .controller('ModalCtrl', function($scope, $http) {
    // 初始化多行数据，可根据实际需求从接口获取
    $scope.items = [
      { id: 1, displayText: "默认行1", isEditable: false, inputValue: "默认行1" },
      { id: 2, displayText: "默认行2", isEditable: false, inputValue: "默认行2" },
      { id: 3, displayText: "默认行3", isEditable: false, inputValue: "默认行3" }
    ];

    // 后续逻辑写在这里...
  });

2. 编写弹窗HTML模板 #

用ng-repeat循环渲染每一行，根据isEditable状态切换显示静态文本或输入框，同时给每行加一个切换编辑状态的按钮：

<div ng-app="myApp" ng-controller="ModalCtrl" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h3>多行数据编辑</h3>
    </div>
    <div class="modal-body">
      <div ng-repeat="item in items" class="data-row">
        <!-- 未编辑时显示静态文本 -->
        <span ng-hide="item.isEditable" class="text-display">{{ item.displayText }}</span>
        <!-- 编辑状态显示输入框，绑定inputValue -->
        <input type="text" ng-show="item.isEditable" ng-model="item.inputValue" class="edit-input">
        <!-- 切换编辑状态的按钮，文本随状态变化 -->
        <button ng-click="toggleEdit(item)" class="btn-toggle">
          {{ item.isEditable ? '取消' : 'Enable' }}
        </button>
      </div>
    </div>
    <div class="modal-footer">
      <!-- 批量更新按钮 -->
      <button ng-click="batchUpdate()" class="btn-update">Update</button>
    </div>
  </div>
</div>

3. 实现控制器核心逻辑 #

切换编辑状态函数 #

点击Enable按钮时切换编辑状态，取消编辑时还原输入框的值：

$scope.toggleEdit = function(item) {
  if (item.isEditable) {
    // 取消编辑，把输入值还原为原始显示文本
    item.inputValue = item.displayText;
  }
  item.isEditable = !item.isEditable;
};

批量更新函数 #

筛选出所有已启用编辑的行，整理成API需要的参数格式，调用接口完成批量更新，更新成功后同步显示文本并关闭编辑状态：

$scope.batchUpdate = function() {
  // 筛选出所有处于编辑状态的行（即需要更新的数据）
  const updatePayload = $scope.items
    .filter(item => item.isEditable)
    .map(item => ({
      id: item.id,
      value: item.inputValue
    }));

  // 没有待更新数据时提示
  if (updatePayload.length === 0) {
    alert("没有需要更新的数据哦！");
    return;
  }

  // 调用批量更新API
  $http.post('/your-api-endpoint/batch-update', updatePayload)
    .then(function(response) {
      alert("批量更新成功！");
      // 更新成功后，同步显示文本并关闭编辑状态
      updatePayload.forEach(updatedItem => {
        const target = $scope.items.find(item => item.id === updatedItem.id);
        target.displayText = updatedItem.value;
        target.isEditable = false;
      });
    })
    .catch(function(error) {
      console.error("更新失败：", error);
      alert("更新失败，请稍后重试！");
    });
};

4. 可选：添加基础样式优化 #

给行元素加一点样式，让布局更美观：

.data-row {
  margin: 12px 0;
  display: flex;
  gap: 10px;
  align-items: center;
}
.text-display {
  min-width: 200px;
}
.edit-input {
  padding: 4px 8px;
  min-width: 200px;
}
.btn-toggle, .btn-update {
  padding: 4px 12px;
  cursor: pointer;
}

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