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"

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

2 个答案: