Angularjs hide row if another row is selected - angularjs

Question

I have a html/angularjs table that contains the ff :
<tbody ng-repeat="x in Persons">
<tr>
<td>{{x.FirstName}}</td>
<td>{{x.LastName}}</td>
<td>{{x.Department}}</td>
<td>
<a href"#" data-ng-click="x.show = !x.show">
Sales Details
</a>
</td>
</tr>
<tr>
<td ng-show="x.show">
<!--user sales details here-->
</td>
</tr>
</tbody>
Currently, if I click on the first row it shows the details but I need to click it again to hide it. I want to hide the first row details if the 2nd row is clicked. How do I go about this?

Answer 1

Try this. i hope this what exactly what you want.
var app = angular.module("app", []);
app.controller("name", function($scope) {
$scope.Persons=[{"FirstName":"Ramesh","show":false},{FirstName:"Suresh","show":false}];
$scope.showorhide = function(index){
var currentOption=$scope.Persons[index].show;
$scope.Persons.forEach(x=>x.show=false);
$scope.Persons[index].show=!currentOption;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="name">
<table>
<tbody ng-repeat="x in Persons">
<tr>
<td>First Name</td>
<td>
<a href"#/" style="color:red" ng-click="showorhide($index)">
open/close
</a>
</td>
</tr>
<tr ng-show="x.show">
<td >
{{x.FirstName}}
</td>
</tr>
</tbody>
</table>
</div>

Answer 2

you need a method for this
take a look
https://stackblitz.com/edit/js-tv6dog?file=index.js
js:
$scope.clicked = function(index){
let currentOption=$scope.Persons[index].show;
$scope.Persons.forEach(x=>x.show=false);
$scope.Persons[index].show=!currentOption;
}
html
<td>
<a href"#" data-ng-click="clicked($index)">
Sales Details
</a>
</td>
and of course add track by to ng-repeat
<tbody ng-repeat="x in Persons track by $index">