Angularjs - Как показать конкретный div, щелкнуть по определенной ссылке и скрыть предыдущий div с помощью ng повторяющихся вкладок

Question

Здесь у меня есть 3 ссылки. Когда я нажимаю на ссылку, показывается конкретный div, снова при нажатии на следующий div показывается конкретный div, но здесь мне нужно каждый раз скрывать предыдущий div по щелчку следующей ссылки. Вот ссылка и divприходит от ng repeat.For ex - когда я нажимаю «Click-1», должно отображаться «name1», опять же, когда я нажимаю «Click-2», должно отображаться только «name2» и «name1» должно скрываться ... и так далее.Вот код ниже

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="maindiv" ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in data"><span ng-click="showDetails($index,0)" class="id">Click-{{x.id}}</span>&nbsp;&nbsp;&nbsp;sssssssssssssss<span ng-show="div_[$index+'_0']" class="name">{{x.name}}</span></li>
</ul>
</div>

Сценарий

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.div_=[];
    $scope.showDetails = function(index,row){
        $scope.div_[index+'_'+row]= true;
    }
   $scope.data=
   [{
        "name": "name1",
        "id": "1"
    },
    {
        "name": "name2",
        "id": "2"
    },
    {
        "name": "name3",
        "id": "3"
    }
]
});

стиль

ul li{
list-style-type:none;
cursor:pointer;
}
ul{
margin:0;
}
.maindiv{
position:relative;
}
.name{
position: absolute;
    left: 97px;
    background: #fff;
    border: 1px solid;
    width: 61px;
    height: 23px;
}

Answer 1

Один из подходов - передать выбранный элемент контроллеру и сохранить в качестве активного элемента. Вы можете использовать этот же подход для таких вещей, как ng-class в ссылках, чтобы установить активный класс также

Затем в ng-show посмотрите, является ли текущий элемент сохраненным активным элементом

var data = [{"name":"name1","id":"1"},{"name":"name2","id":"2"},{"name":"name3","id":"3"}];


var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  $scope.data = data;
  
  $scope.setActiveItem = function(item){
     $scope.activeItem = item;
  }
  
  // show first on page load
   $scope.activeItem = data[0];
  
});

li { padding:10px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="maindiv" ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in data" >
       <span ng-click="setActiveItem(x)" class="id">Click-{{x.id}}</span>
    </li>
  </ul>  
  
  <div ng-repeat="x in data" ng-show="activeItem==x">{{x | json}}</div>  
  
</div>