Question

我对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>

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

在控制器内写入

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

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

如何在AngularJS ng-repeat中选择特定元素？

4 个答案: