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>

控制器：

$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;
};

以下是一个通用示例，其中包含视图中的所有逻辑： 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>

Answer 2

有很多方法可以解决这个问题。

这里的问题是你的变量加载是在行之间共享范围。

可以使用一种方法$index

HTML

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

JS

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

在对象记录中使用属性：

HTML

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

JS

$scope.someAction = function(record) {
   var name = record.name; 
   record.loading = true;
};

祝你好运

Answer 3

ng-repeat中的范围与外部范围不同。实际上，ng-repeat之外的范围是内部范围的父级。所以html代码就在这里

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

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

3 个答案: