javascript - 如何访问和使用 ng-repeat 中每个项目的索引

Question

我有一个表，其中每行的最后一列包含一个小加载图标，我想在单击表内的按钮时显示该图标。

当使用 ng-repeat 生成每个表行时，加载程序会出现在每一行中，而不是单独的一行中。如何仅针对当前点击的索引将 ng-show 设置为 true 或 false？

模板:

<tr ng-repeat="record in records">
  <td>{{ record.name }}</td>
  <td><a ng-click="someAction(record.name)">Some Action</a></td>
  <td ng-show="loading">Loading...</td>
</tr>

Controller :

$scope.someAction = function(recordName) {
  $scope.loading = true;
};

Answer 1

可以传入$index参数，设置/使用对应的索引。 $index 在 ng-repeat 的范围内自动可用。

<td><a ng-click="someAction(record.name, $index)">Some Action</a></td>
<td ng-show="loading[$index]">Loading...</td>


$scope.someAction = function(recordName, $index) {
  $scope.loading[$index] = true;
};

为方便起见，这里有一个包含 View 中所有逻辑的通用示例: Live demo (click).

<div ng-repeat="foo in ['a','b','c']" ng-init="loading=[]">
  <p ng-click="loading[$index]=true">Click me! Item Value: {{foo}}<p>
  <p ng-show="loading[$index]">Item {{$index}} loading...</p>
</div>