隐藏除单击行AngularJS之外的所有表行答案

【问题标题】：Hide all table rows except clicked row AngularJS隐藏除单击行AngularJS之外的所有表行
【发布时间】：2017-01-15 03:44:03
【问题描述】：

我有一个用 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>

【问题讨论】：

对这个问题投反对票？

标签： javascript html angularjs

【解决方案1】：

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

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

【讨论】：

如果您需要它们重新出现，只需将 'selected' 设置为 null
哇！谢谢！我只是想弄清楚这一点。我今天才开始使用 Angular。我真的很感激！

【解决方案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，就像我在上面的代码中所做的那样。

【讨论】：