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

设置选定值后，您可以仅在未选定的行上设置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 。

Answer 2

尝试将以下内容添加到您的<tr> 。 它的基本含义是，如果有选择并且该选择不是要迭代的当前人员，则隐藏此行。

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