Verstecke alle Tabellenzeilen mit Ausnahme der angeklickten Zeile AngularJS

Question

Ich habe eine Tabelle, die mit ng-repeat gefüllt ist. Wenn auf die Zeile geklickt wird, lade ich die mit dem Objekt in Beziehung stehenden Daten mit ng-klick ab. Die Tabelle enthält eine JSON-Datei. Wie kann ich alle anderen Zeilen der Tabelle ausblenden, wenn auf die ausgewählte Zeile geklickt wird?

<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

Versuchen Sie Folgendes zu Ihrer <tr> hinzuzufügen. Im Grunde heißt es, diese Zeile ausblenden, wenn es eine Auswahl gibt und diese Auswahl nicht die aktuelle Person ist, die iteriert wird.

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

Answer 2

Sie könnten nur einen ng-hide Wert auf nicht ausgewählten Zeilen gesetzt, wenn ein ausgewählter Wert gesetzt wurde:

<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> 

Sie werden auch wahrscheinlich wollen die ng-repeat wie ich oben in dem Code tat bewegen.