AngularJS：基于ng-repeat实现嵌套对象表格的增删行功能

嘿，我来帮你搞定这个AngularJS的表格增删行需求！针对你给出的嵌套对象结构，我们可以通过以下步骤实现带增删功能的表格：

首先写表格的HTML，用ng-repeat遍历对象的键值对，这样能拿到每个行的唯一键（比如"1"、"3"），方便后续删除操作：

<div ng-app="myApp" ng-controller="myCtrl">
  <table border="1">
    <thead>
      <tr>
        <th>Name</th>
        <th>Country</th>
        <th>City</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <!-- 遍历对象的键和值，key就是你数据里的"1""2"这类标识 -->
      <tr ng-repeat="(key, item) in fieldData.gridDetails">
        <td><input type="text" ng-model="item.Name"></td>
        <td><input type="text" ng-model="item.Country"></td>
        <td><input type="text" ng-model="item.City"></td>
        <td>
          <!-- 点击删除按钮时，把当前行的key传给删除函数 -->
          <button ng-click="deleteRow(key)">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- 新增行按钮 -->
  <button ng-click="addRow()">Add New Row</button>
</div>

接下来在AngularJS控制器里实现删除和新增行的函数，同时处理你的对象数据结构：

angular.module('myApp', [])
.controller('myCtrl', function($scope) {
  // 初始化你的数据
  $scope.fieldData = {
    gridDetails: {
      "1": { "Name" : "Test A", "Country" : "Germany", "City" : "Berlin" },
      "2": { "Name" : "Test B", "Country" : "USA", "City" : "Chicago" },
      "3": { "Name" : "Test C", "Country" : "France", "City" : "Paris" },
      "4": { "Name" : "Test D", "Country" : "USA", "City" : "New York" }
    }
  };

  // 删除指定键的行
  $scope.deleteRow = function(key) {
    // 直接删除对象中对应key的属性，AngularJS双向绑定会自动更新视图
    delete $scope.fieldData.gridDetails[key];
  };

  // 新增行函数
  $scope.addRow = function() {
    // 生成新的唯一key：找到当前最大的数字键，加1后转成字符串
    let maxKey = 0;
    Object.keys($scope.fieldData.gridDetails).forEach(k => {
      const numKey = parseInt(k);
      if (numKey > maxKey) {
        maxKey = numKey;
      }
    });
    const newKey = (maxKey + 1).toString();
    // 新增空的行数据
    $scope.fieldData.gridDetails[newKey] = {
      Name: "",
      Country: "",
      City: ""
    };
  };
});

• 遍历对象：用(key, item) in fieldData.gridDetails的语法，能同时拿到每个数据项的唯一标识key和具体数据item，这是处理对象型数据的关键。
• 删除操作：直接用delete操作符删除对象的属性，AngularJS的双向绑定会自动检测到$scope的变化，立刻更新表格视图，不需要额外手动刷新。
• 新增行的key生成：通过遍历当前所有key，转成数字找到最大值，加1后转成字符串，保证新key和现有格式一致（比如"5"、"6"）。

这样实现后，你点击删除键为"3"的行，$scope.fieldData.gridDetails里的"3"属性就会被移除，表格也会立刻更新；点击新增按钮则会添加一行空数据，支持编辑。

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