javascript - 隐藏除单击行之外的所有表格行 AngularJS

Question

我有一个用 ng-repeat 填充的表。单击该行时，我将使用 ng-click 检索与该对象相关的数据。该表由 json 文件填充。单击所选行时如何隐藏表格的所有其他行？

<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr> 
    </thead>
    <tbody style="cursor: pointer" ng-cloak> <!--When the row is clicked, I want to hide all other rows except the clicked one.-->
        <tr ng-repeat="person in people" ng-click="getSelected(person);">
            <td>{{ person.firstName }}</td>
            <td>{{ person.lastName }}</td>
            <td>{{ person.age }}</td>
        </tr>
    </tbody>
</table>

<script>
    angular.module("App", []).controller("MainController", function ($scope) {
        $scope.people = peopleData;
        $scope.getSelected = function (person) {
            $scope.selected = person;
        };
    });
</script>

Answer 1

尝试将以下内容添加到您的 <tr> 中。它基本上是说，如果有一个选择并且该选择不是当前正在迭代的人，则隐藏此行。

ng-hide="selected && selected !== person"