隐藏除单击行之外的所有表格行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像我一样在上面的代码。