如何在AngularJS中使用$http.post获取带复选框的DataTable选中行？

嘿，我来帮你搞定这个问题！你已经通过vm.selected对象记录了每一行的选中状态（键是行ID，值是布尔值），接下来只需要几步就能把选中的数据通过$http.post发送出去：

1. 筛选出选中的行数据 #

首先你得有一个存放所有表格原始数据的数组（我假设你用vm.tableData，如果你的变量名不一样，直接替换成自己的就行）。写个方法过滤出被选中的行：

vm.getSelectedRows = function() {
  // 遍历表格数据，筛选出selected对象中对应ID为true的行
  return vm.tableData.filter(function(row) {
    return vm.selected[row.ID];
  });
};

要是你习惯ES6箭头函数，也可以简化成：

vm.getSelectedRows = () => vm.tableData.filter(row => vm.selected[row.ID]);

2. 编写提交方法发送POST请求 #

接下来写一个触发提交的方法，调用上面的函数拿到选中数据，再用$http.post发送到后端接口：

vm.submitSelected = function() {
  const selectedRows = vm.getSelectedRows();
  
  // 先判断是否有选中数据
  if (selectedRows.length === 0) {
    alert('请至少选择一行数据哦！');
    return;
  }
  
  // 替换成你的后端接口地址，发送选中的行数据
  $http.post('/api/your-submit-api', selectedRows)
    .then(function(response) {
      // 请求成功后的处理，比如提示用户
      alert('数据提交成功啦！');
      console.log('后端响应数据:', response.data);
    })
    .catch(function(error) {
      // 请求失败的处理，打印错误或提示用户
      console.error('提交失败:', error);
      alert('提交失败，请稍后重试~');
    });
};

3. 关键注意点 #

• 确保控制器已经正确注入$http服务，示例如下：

angular.module('yourAppName').controller('YourController', ['$http', function($http) {
  var vm = this;
  // 初始化选中状态对象
  vm.selected = {};
  // 你的表格数据、列配置等其他逻辑...
  // 上面的getSelectedRows和submitSelected方法...
}]);

• 如果用的是angular-datatables，要保证vm.tableData是完整的表格数据集，这样筛选出来的选中行才会准确。

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