AngularJS表格数组对象修改（新增数据）及提交技术咨询

看起来你是在AngularJS项目里做表格数据的编辑和提交功能对吧？我帮你梳理下完整的实现方案，从模板到控制器逻辑都给你补全好：

1. 完善表格模板（支持修改、新增、删除） #

先把你的表格代码补全，加上新增行的输入区域和操作按钮，确保每个字段都能通过双向绑定实时修改：

<div ng-controller="CustomerController">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>序号</th>
        <th>是否负责人</th>
        <th>姓名</th>
        <th>电话</th>
        <th>地址前缀</th>
        <th>备注</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 循环展示现有客户数据，支持实时修改 -->
      <tr ng-repeat="cus in postObj.custs track by $index">
        <td>{{$index + 1}}</td>
        <td><input type="checkbox" ng-model="cus.principal"/></td>
        <td><input type="text" class="form-control" ng-model="cus.Name"/></td>
        <td><input type="text" class="form-control" ng-model="cus.Phone"/></td>
        <td><input type="text" class="form-control" ng-model="cus.AddPre"/></td>
        <td><input type="text" class="form-control" ng-model="cus.Remark"/></td>
        <td><button class="btn btn-danger" ng-click="removeRow($index)">删除</button></td>
      </tr>
      <!-- 新增客户的输入行 -->
      <tr>
        <td>{{postObj.custs.length + 1}}</td>
        <td><input type="checkbox" ng-model="newCust.principal"/></td>
        <td><input type="text" class="form-control" ng-model="newCust.Name"/></td>
        <td><input type="text" class="form-control" ng-model="newCust.Phone"/></td>
        <td><input type="text" class="form-control" ng-model="newCust.AddPre"/></td>
        <td><input type="text" class="form-control" ng-model="newCust.Remark"/></td>
        <td><button class="btn btn-success" ng-click="addNewCust()">添加</button></td>
      </tr>
    </tbody>
  </table>
  <button class="btn btn-primary" ng-click="submitData()">提交所有修改</button>
</div>

2. 控制器逻辑处理（新增、删除、提交） #

接下来写对应的AngularJS控制器，处理数据的新增、删除和提交逻辑，确保数据能正确同步和提交：

angular.module('myApp', [])
.controller('CustomerController', function($scope, $http) {
  // 初始化你的postObj（可以是后端返回的初始数据）
  $scope.postObj = {
    custs: [
      {principal: false, Name: "张三", Phone: "13800138000", AddPre: "北京市", Remark: ""},
      {principal: true, Name: "李四", Phone: "13900139000", AddPre: "上海市", Remark: "负责人"}
    ]
  };

  // 新增客户的模板对象，用于绑定新增行的输入框
  $scope.newCust = {principal: false, Name: "", Phone: "", AddPre: "", Remark: ""};

  // 添加新客户到数组
  $scope.addNewCust = function() {
    // 可选：简单的必填字段验证
    if (!$scope.newCust.Name || !$scope.newCust.Phone) {
      alert("姓名和电话不能为空哦");
      return;
    }
    // 用angular.copy复制对象，避免后续修改新增行影响已添加的数据
    $scope.postObj.custs.push(angular.copy($scope.newCust));
    // 重置新增行的输入框
    $scope.newCust = {principal: false, Name: "", Phone: "", AddPre: "", Remark: ""};
  };

  // 删除指定索引的客户行
  $scope.removeRow = function(index) {
    $scope.postObj.custs.splice(index, 1);
  };

  // 提交修改后的完整postObj
  $scope.submitData = function() {
    // 可选：业务逻辑验证，比如确保至少有一个负责人
    const hasPrincipal = $scope.postObj.custs.some(cust => cust.principal);
    if (!hasPrincipal) {
      alert("请至少选择一个负责人");
      return;
    }

    // 发送POST请求提交数据，这里替换成你的后端接口地址
    $http.post('/your-api-endpoint', $scope.postObj)
      .then(function(response) {
        alert("提交成功！");
        // 提交成功后的操作，比如刷新数据或跳转页面
      })
      .catch(function(error) {
        console.error("提交失败：", error);
        alert("提交失败，请稍后重试");
      });
  };
});

3. 关键注意点 #

• 双向绑定自动同步：通过ng-model直接绑定postObj.custs里的属性，修改输入框内容时会自动更新数组中的数据，不需要手动同步。
• track by $index：在ng-repeat中加上这个可以避免数组元素变化时出现AngularJS的重复渲染错误，新增/删除行时更稳定。
• 对象复制：新增时用angular.copy复制newCust，防止后续修改新增行的输入框影响已经添加到数组里的数据。
• 提交时直接传整个对象：后端可以直接接收postObj，解析里面的custs数组，完成数据的新增和修改操作。

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