隐藏除单击的行 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"

Answer 2

设置了

选定值后，您可以在未选择的行上设置ng-hide值：

<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 ng-repeat="person in people"> <!--When the row is clicked, I want to hide all other rows except the clicked one.-->
        <tr ng-hide="selected!==null && person!==selected" 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.selected = null;
        $scope.getSelected = function (person) {
            $scope.selected = person;
        };
    });
</script>

您可能还想像我在上面的代码中所做的那样移动ng-repeat。