如何 select AnglujarJS ng-repeater 中的特定元素？

Question

我是 Angular 的新手，所以我不确定 正确的方法是什么 来执行以下操作：我有一个中继器可以生成两个 [=每次迭代有 14=]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>

Answer 1

希望您已经设置好控制器。您的 $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 建议的更改。这将考虑多个学生。

Answer 2

在controller里面写

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

Answer 3

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

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

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

Answer 4

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

修改了一些东西：

ng-hide 改为 ng-show

添加 showDetails 属性学生

因此您可以隐藏所有元素，只显示所选行。

如何 select AnglujarJS ng-repeater 中的特定元素？

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

javascript

click

onclick

angularjs

angularjs-ng-repeat