AngularJS动态表格中如何为元素动态分配ID？

当然可以在AngularJS里给表格元素动态分配ID啦！而且结合你的需求——动态添加行、下拉选值求和，我们可以把这些逻辑完美整合起来，下面一步步给你讲清楚怎么做：

在AngularJS的ng-repeat指令里，我们可以利用内置的$index变量来生成唯一ID。$index会自动对应当前循环项在数组中的索引（从0开始递增），所以只要把它拼到ID字符串里，就能保证每一行的下拉框ID都是独一无二的，比如red-select-{{$index}}、blue-select-{{$index}}。

HTML部分 #

<div ng-app="fightScoreApp" ng-controller="ScoreController">
  <table border="1">
    <thead>
      <tr>
        <th>Round</th>
        <th>Red Corner</th>
        <th>Blue Corner</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="round in rounds track by $index">
        <td>Round {{$index + 1}}</td>
        <td>
          <select id="red-select-{{$index}}" ng-model="round.red">
            <option ng-repeat="num in [1,2,3,4,5,6,7,8,9,10]" value="{{num}}">{{num}}</option>
          </select>
        </td>
        <td>
          <select id="blue-select-{{$index}}" ng-model="round.blue">
            <option ng-repeat="num in [1,2,3,4,5,6,7,8,9,10]" value="{{num}}">{{num}}</option>
          </select>
        </td>
        <td><button ng-click="removeRound($index)">Remove</button></td>
      </tr>
    </tbody>
  </table>
  
  <button ng-click="addRound()">Add New Round</button>
  
  <div>
    <p>Total Red Score: {{getRedTotal()}}</p>
    <p>Total Blue Score: {{getBlueTotal()}}</p>
  </div>
</div>

AngularJS控制器部分 #

angular.module('fightScoreApp', [])
.controller('ScoreController', function($scope) {
  // 初始化至少一行数据
  $scope.rounds = [{ red: 1, blue: 1 }];
  
  // 添加新行
  $scope.addRound = function() {
    $scope.rounds.push({ red: 1, blue: 1 });
  };
  
  // 删除指定行
  $scope.removeRound = function(index) {
    $scope.rounds.splice(index, 1);
  };
  
  // 计算Red总分
  $scope.getRedTotal = function() {
    return $scope.rounds.reduce(function(total, round) {
      return total + parseInt(round.red);
    }, 0);
  };
  
  // 计算Blue总分
  $scope.getBlueTotal = function() {
    return $scope.rounds.reduce(function(total, round) {
      return total + parseInt(round.blue);
    }, 0);
  };
});

• 动态ID：每个下拉框的ID通过{{$index}}拼接生成，比如第一行Red下拉的ID是red-select-0，第二行是red-select-1，以此类推，完全满足动态唯一的需求。
• 下拉选项生成：用ng-repeat遍历数组[1,2,...,10]快速生成1到10的选项，不用手动写10个<option>。
• 实时求和：利用数组的reduce方法遍历所有行的分数，每次下拉选值变化时，AngularJS的双向绑定会自动触发求和函数，实时更新总分显示。
• 行的增删：通过push和splice操作$scope.rounds数组，ng-repeat会自动渲染对应的表格行，非常方便。

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