如何在AnglujarJS ng中继器中选择特定元素

How to select a specific element in an AnglujarJS ng-repeater?

本文关键字：选择 元素 中继器 AnglujarJS ng      更新时间：2023-09-26

我对Angular完全陌生，所以我不确定执行以下操作的正确方法是什么：我有一个中继器，它为每次迭代生成两个tr元素。第二个tr元素最初是隐藏的。我想展示单击第一个元素时的第二个tr元素。如何使用Angular完成此操作？

<tbody>
    <tr ng-repeat-start="student in students" ng-click="showDetails()">
        <td>{{ $index + 1 }}</td>
        <td>{{ student.name }}</td>
        <td>{{ student.age }} </td>
    </tr>
    <tr ng-repeat-end ng-hide="true">
        <td colspan="3">
            <!--  Detailed information goes here -->
        </td>
    </tr>
</tbody>

希望您已经设置好了控制器。您的$scope.showDetails方法应该类似于：

$scope.showRow = [];
$scope.showDetails = function (idx) {
    $scope.showRow[idx] = true;
}

然后，将ng-hide="true"更改为ng-hide="showRow"。

<tbody>
    <tr ng-repeat-start="student in students" ng-click="showDetails($index)">
        <td>{{ $index + 1 }}</td>
        <td>{{ student.name }}</td>
        <td>{{ student.age }} </td>
    </tr>
    <tr ng-repeat-end ng-hide="showRow[$index]">
        <td colspan="3">
            <!--  Detailed information goes here -->
        </td>
    </tr>
</tbody>

编辑：使用了@AviadP建议的更改。这将考虑多个学生。

在控制器内部写入

$scope.hideRow = true;
$scope.showDetails = function () {
    $scope.hideRow = false;
}

并在ng-hide 中添加hideRow范围

<tbody>
    <tr ng-repeat-start="student in students" ng-click="showDetails()">
        <td>{{ $index + 1 }}</td>
        <td>{{ student.name }}</td>
        <td>{{ student.age }} </td>
    </tr>
    <tr ng-repeat-end ng-hide="hideRow">
        <td colspan="3">
            <!--  Detailed information goes here -->
        </td>
    </tr>
</tbody>

请在此处查看我的演示：https://jsfiddle.net/4ggbog6u/

我为每个学生提供一个属性，以决定是否显示细节

  $scope.showDetails = function(index) {
      $scope.students[index].detailOn = !$scope.students[index].detailOn;
  }

演示：https://jsfiddle.net/0yLk4znh/

修改了几件事：

ng-hide改为ng-show

为学生添加showDetails属性

因此，您可以隐藏所有元素，只使选定的行可见。

相关文章：