クリックした行以外のすべてのテーブル行を非表示にする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を移動することになるでしょう。