如何获取AngularJS动态生成表格的<td>值以设置仪表盘背景色？

问题根源 #

你遇到的核心问题是AngularJS的DOM渲染时机和jQuery的执行时机不匹配。

你的jQuery代码写在$(document).ready()里，这个函数会在浏览器加载完静态HTML结构后立即执行，但此时AngularJS还没完成数据绑定——也就是ng-repeat="operation in dataOperationList"还没把你的数据渲染成实际的<tr>和<td>元素。所以$("#table1 tbody tr")根本找不到任何元素，each循环自然不会执行。

推荐解决方案：用AngularJS指令处理（最佳实践） #

AngularJS推荐用自身的指令来处理DOM操作，这样能和框架的数据绑定机制完美配合，避免时机问题。我们可以自定义一个指令，让每个表格行渲染完成后自动获取<td>值并设置背景色：

步骤1：定义自定义指令 #

在你的Angular模块中添加这个指令：

// 假设你的Angular模块名为app
var app = angular.module('app', []);

app.directive('tableRowColor', function() {
  return {
    link: function(scope, element, attrs) {
      // element就是当前的<tr>元素
      var lastTd = element.find('td:last-child');
      // 获取<td>的文本内容并去除空格
      var cellValue = lastTd.text().trim();
      
      // 这里根据你的需求写背景色判断逻辑，比如假设值是数字
      if (cellValue && parseInt(cellValue) > 100) {
        element.css('background-color', '#ffeeee'); // 浅红色标识
      } else if (cellValue && parseInt(cellValue) < 50) {
        element.css('background-color', '#eeffee'); // 浅绿色标识
      }
      // 可根据实际业务需求扩展更多判断条件
    }
  };
});

步骤2：在表格行上应用指令 #

修改你的HTML，给<tr>添加自定义指令：

<tr ng-repeat="operation in dataOperationList" table-row-color>
  <td class="details-control"></td>
  <td>{{operation.reportTypeDetail}}</td>
  <td>{{operation.reportFormula}}</td>
  <td>{{operation.reportRang}}</td>
  <td>{{operation.year5}}</td>
  <td>{{operation.year4}}</td>
  <td>{{operation.year3}}</td>
  <td>{{operation.year2}}</td>
</tr>

这样，每一行被Angular渲染出来后，指令会自动执行，获取最后一个<td>的值并设置背景色，完全不用操心时机问题。

备选方案：用jQuery结合Angular的事件（不推荐，但临时可用） #

如果你一定要用jQuery，那需要确保代码在Angular完成DOM渲染后执行。可以通过监听Angular的$viewContentLoaded事件，或者用$timeout延迟执行：

方法1：监听$viewContentLoaded事件 #

在你的控制器中添加：

app.controller('YourController', function($scope) {
  $scope.$on('$viewContentLoaded', function() {
    // 此时Angular已经完成DOM渲染
    $("#table1 tbody tr").each(function() {
      var cellValue = $(this).find("td:last-child").text().trim();
      alert(cellValue);
      // 这里写背景色设置逻辑
      if (parseInt(cellValue) > 100) {
        $(this).css('background-color', '#ffeeee');
      }
    });
  });
});

方法2：用$timeout延迟执行 #

如果是在控制器外部使用jQuery，可以这样写：

$(document).ready(function(){
  // 注入$timeout服务（需确保Angular已加载）
  angular.element(document).injector().invoke(function($timeout) {
    $timeout(function() {
      $("#table1 tbody tr").each(function() {
        alert($(this).find("td:last-child").html());
      });
    }, 0);
  });
});

不过这种混合jQuery和Angular的方式容易引发后续维护问题，所以还是优先推荐自定义指令的方案。

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