如何用AngularJS设置表格列背景色？获取索引及替代$()方法

核心思路 #

AngularJS提倡数据驱动视图，无需像jQuery那样直接操作DOM。我们可以通过绑定鼠标事件维护当前高亮列的索引，再用ng-class动态添加样式，完全规避手动DOM操作。

1. 获取列索引 #

在ng-repeat遍历表格列时，内置的$index变量即为当前列的索引（从0开始），直接使用即可。

2. 替代jQuery的$()方法 #

AngularJS内置了jqLite（angular.element()），是jQuery的轻量子集，支持常用DOM操作；若项目已引入完整jQuery，angular.element()等价于$()。但更推荐用数据绑定控制样式，避免直接操作DOM。

完整实现示例 #

HTML代码

<div ng-app="columnHighlightApp" ng-controller="ColumnHighlightCtrl">
  <table>
    <thead>
      <tr>
        <th ng-repeat="col in columns" 
            ng-mouseenter="enterColumn($index)" 
            ng-mouseleave="leaveColumn()">
          {{col.name}}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in data">
        <td ng-repeat="col in columns"
            ng-class="{'highlighted': highlightedColumn === $index}"
            ng-mouseenter="enterColumn($index)" 
            ng-mouseleave="leaveColumn()">
          {{row[col.key]}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

CSS样式

.highlighted {
  background-color: #f5f5f5;
}

AngularJS代码

angular.module('columnHighlightApp', [])
.controller('ColumnHighlightCtrl', function($scope) {
  // 模拟表格列配置与数据
  $scope.columns = [
    {name: 'ID', key: 'id'},
    {name: '姓名', key: 'name'},
    {name: '年龄', key: 'age'}
  ];
  
  $scope.data = [
    {id: 1, name: '张三', age: 25},
    {id: 2, name: '李四', age: 30},
    {id: 3, name: '王五', age: 28}
  ];
  
  // 维护当前高亮列的索引
  $scope.highlightedColumn = null;
  
  // 鼠标进入列时设置高亮索引
  $scope.enterColumn = function(columnIndex) {
    $scope.highlightedColumn = columnIndex;
  };
  
  // 鼠标离开时清除高亮索引
  $scope.leaveColumn = function() {
    $scope.highlightedColumn = null;
  };
});

为什么不直接操作DOM？ #

AngularJS的$digest循环负责视图与数据的同步，直接用angular.element()或jQuery修改DOM会绕过这个机制，可能导致视图更新不及时，甚至出现数据与视图不一致的问题。数据驱动的方式更符合AngularJS的设计理念，代码也更易维护。

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