Highlight a selected row in ng repeat using class 使用ng class

在AngularJS中，ng-repeat 是一个非常强大的指令，用于迭代数据并动态地在DOM中渲染元素。在一些场景下，我们可能希望突出显示被选中的行，例如在表格或列表中。ng-class 是AngularJS提供的另一个指令，它允许我们基于表达式的值来动态地添加或移除CSS类。将探讨如何结合使用 ng-repeat 和 ng-class 来实现这一功能。

我们需要一个简单的HTML结构，其中包含一个 ng-repeat 指令来遍历数据集：

<table>

<tr ng-class="{selected: isSelected(item)}" ng-repeat="item in items">

<td>{{item.name}}td>



tr>

table>

在这个例子中，ng-repeat 在 元素上迭代 items 数组，并为每个项目创建一个表格行。ng-class 指令接收一个对象，该对象的键是CSS类名，值是AngularJS表达式。这里，我们使用 isSelected(item) 表达式来决定是否应用 selected 类。

我们需要在控制器中定义 isSelected 函数。这个函数会检查当前项是否与已选择的项匹配：

function MyController($scope) {

    $scope.items = [/* your data array */];

    $scope.selectedItem = null;

    $scope.isSelected = function(item) {

        return item === $scope.selectedItem;

    };

}

在上面的代码中，selectedItem 变量存储了当前选中的项。isSelected 函数比较传入的 item 与 selectedItem。如果两者相等，函数返回 true，ng-class 就会添加 selected 类到对应的 元素，从而高亮显示。当用户交互时，例如点击某个行，我们需要更新 selectedItem 以反映新的选择。

<tr ng-class="{selected: isSelected(item)}" ng-click="selectItem(item)" ng-repeat="item in items">

    <td>{{item.name}}td>

    

tr>

然后，在控制器中定义 selectItem 函数：

$scope.selectItem = function(item) {

    $scope.selectedItem = item;

};

通过使用 ng-repeat 和 ng-class，我们可以轻松地在AngularJS应用中实现突出显示 ng-repeat 中的选定行。关键在于定义一个 isSelected 函数来根据当前选择的状态判断是否应用高亮类，以及一个 selectItem 函数来处理用户的交互，更新选择状态。