AngularJS如何通过数组向表格添加记录并实现批量上传

嘿，我来帮你搞定这两个需求——先把单条数据正常追加到表格，再实现批量上传功能。咱们一步步来：

一、修复单条数据追加到表格的问题 #

你现有代码里有几个小问题导致数据没法正常显示，我帮你调整一下：

问题点说明 #

• $scope.JobData.push(_data).toString(); 这行完全多余：push() 返回的是数组新长度，调用 toString() 不仅没用，还可能引发错误，直接去掉即可。
• 键名大小写不匹配：你在对象里定义的是 mname，但表格模板里用的是 _mydata.Mname，大小写不一致会导致中间名无法渲染，得统一成相同的大小写。

修复后的代码 #

控制器代码

$scope.JobData = [];
$scope.SaveData = function (MyData) {
    // 统一键名大小写，和模板保持一致
    var _data = { 
        fname: MyData.fname, 
        mname: MyData.mname  // 这里改成小写m，和模板里的变量对应
    };
    $scope.JobData.push(_data); // 去掉多余的toString()
}

表格模板代码

<table class="">
 <thead>
 <tr>
 <th>First Name</th>
 <th>Middle Name</th>
 </tr>
 </thead>
 <tbody>
 <tr ng-repeat="_mydata in JobData">
 <td>{{_mydata.fname}}</td>
 <td>{{_mydata.mname}}</td> <!-- 这里改成小写m，和控制器里的键名一致 -->
 </tr>
 </tbody>
</table>

这样调整后，调用SaveData传入表单数据，就能正常把单条数据追加到表格里了。

二、实现批量上传功能 #

咱们以CSV文件批量导入为例（这种格式最容易实现，也方便用户准备数据），步骤如下：

1. 添加HTML上传控件 #

在页面里加一个文件上传按钮，允许选中CSV文件：

<input type="file" 
       accept=".csv" 
       ng-change="HandleBatchUpload($event)"
       class="btn btn-primary">

2. 控制器里实现批量上传逻辑 #

添加解析CSV、批量追加数据的函数：

// 批量上传处理函数
$scope.HandleBatchUpload = function(event) {
    var file = event.target.files[0];
    if (!file) return;

    var reader = new FileReader();
    
    reader.onload = function(e) {
        var csvContent = e.target.result;
        // 解析CSV内容（简单版，假设第一行是表头）
        var lines = csvContent.split('\n');
        var headers = lines[0].split(',').map(h => h.trim());
        
        // 从第二行开始处理数据行
        for (var i = 1; i < lines.length; i++) {
            if (!lines[i].trim()) continue; // 跳过空行
            var values = lines[i].split(',').map(v => v.trim());
            var dataObj = {};
            // 匹配表头和值，这里假设表头是"First Name","Middle Name"
            dataObj.fname = values[headers.indexOf('First Name')];
            dataObj.mname = values[headers.indexOf('Middle Name')];
            
            $scope.$apply(function() {
                $scope.JobData.push(dataObj);
            });
        }
    };
    
    reader.onerror = function() {
        alert('读取文件失败，请检查文件格式是否为CSV');
    };
    
    reader.readAsText(file);
};

3. CSV文件格式要求 #

让用户准备的CSV文件表头要和我们的字段对应，比如：

First Name,Middle Name
John,Doe
Jane,Smith
Bob,Johnson

这样上传后就能自动把所有数据批量追加到表格里了。

额外提示 #

• 如果需要支持Excel文件（.xlsx），可以引入SheetJS这类库来解析，逻辑类似，只是文件读取和解析方式不同。
• 可以给批量上传加个加载提示，提升用户体验。
• 建议在追加数据前做一下重复数据校验，避免表格里出现重复条目。

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