AngularJS 如何在ngRepeat中高亮选定的行

在本文中，我们将介绍如何在AngularJS的ngRepeat指令中高亮选定的行。

阅读更多：AngularJS 教程

ngRepeat指令简介

ngRepeat是AngularJS中用于循环遍历数组或对象的指令。它可以将一个包含元素的模板重复渲染多次，每次渲染都会使用数组或对象中的一个元素作为数据源。

使用ng-class指令高亮选定的行

ng-class是AngularJS中用于动态绑定类名的指令，我们可以利用它来实现高亮选定的行。首先，我们需要在ngRepeat指令所在的元素上添加ng-class指令，并将一个条件表达式作为参数。当条件表达式为真时，指定的类名将被添加到元素的类属性中。

下面是一个示例：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in people" ng-class="{'highlight': person.selected}">
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
      <td>{{person.gender}}</td>
    </tr>
  </tbody>
</table>

在上面的示例中，我们在ng-repeat指令所在的tr元素上添加了ng-class指令。ng-class的参数为一个对象字面量，键为类名，值为布尔值。当person.selected为真时，highlight类将被添加到tr元素上。因此，当我们选定一行时，该行将被高亮显示。

接下来，我们需要在控制器中添加相应的逻辑。我们可以使用ng-click指令将点击事件绑定到每一行上，并在点击事件中改变当前行的selected属性。

angular.module('myApp', [])
  .controller('myController', function(scope) {scope.people = [
      {name: '小明', age: 20, gender: '男', selected: false},
      {name: '小红', age: 18, gender: '女', selected: false},
      {name: '小刚', age: 22, gender: '男', selected: false}
    ];

    scope.selectRow = function(person) {
      angular.forEach(scope.people, function(item) {
        item.selected = false;
      });
      person.selected = true;
    };
  });

在上面的示例中，我们在控制器中定义了一个selectRow函数，当某一行被点击时，该函数将被调用。在该函数中，我们首先遍历people数组，将所有人的selected属性设为false，然后将当前行的selected属性设为true，这样就实现了一次只能选定一行的效果。

最后，我们需要在表格的每一行上绑定点击事件。我们可以使用ng-click指令并传递相应的参数。

<tr ng-repeat="person in people" ng-class="{'highlight': person.selected}" ng-click="selectRow(person)">
  ...
</tr>

在上面的示例中，我们在tr元素上添加了ng-click指令，并传递了person对象作为参数。这样，当某一行被点击时，selectRow函数将被调用，传递相应的person对象作为参数。

其他实现方式

除了上述方法外，我们还可以通过改变行的样式或添加CSS类来实现高亮选定行的效果。具体方法取决于我们对选定行的高亮方式的要求，可以根据实际需要选择合适的方式。

总结

在本文中，我们介绍了如何在AngularJS的ngRepeat指令中高亮选定的行。通过使用ng-class指令，我们可以根据条件动态绑定类名，从而实现选定行高亮显示的效果。我们还给出了一个示例，演示了如何在控制器中处理点击事件，并改变选定行的状态。除了示例中的方法，还有其他实现方式可以根据实际需要选择。希望本文对你理解如何高亮选定行有所帮助。