AngularJS: нажимайте скрытый активный стол и покажите новый?

Question

У меня есть таблица html, и когда я нажимаю на любую новую строку таблицы, вы можете увидеть более подробную информацию о некоторых данных строки. Я использую ng-click, ng-repeat и ng-show. Вот что я пытаюсь достичь: я хочу сделать это, когда я нажимаю на какую-то строку, показывает таблицу, и когда я нажимаю на ту же строку снова, таблица скрывается, а также когда какая-то строка активна, если вы нажмете на другую строка первая таблица скрывается и новые шоу. Вот мой HTML:

<tbody> 
    <tr ng-repeat-start="car in carList | filter:tableFilter" ng-click="modelRow.activeRow = car.name; car.showDetails = !car.showDetails"> 
     .... 
    </tr>  
    <tr ng-repeat-end ng-show="modelRow.activeRow==car.name && car.allReviews.length!=0 && car.showDetails" class="hidden-table"> 
     <td colspan="6"> 
      <table class="table table-striped table-bordered table-condensed table-hover"> 
       <tbody ng-repeat="rev in car.allReviews"> 
        .... 
       </tbody> 
      </table> 
     </td> 
    </tr> 
</tbody> 

Вот мой контроллер:

carApp.controller("TableBodyCtrl", function($scope){ 
    $scope.modelRow = { activeRow: '' }; 
    $scope.carList = [{"name":"Ford Focus hatchback",...,"showDetails":false}...]; 

И первоначально мой "showDetails" в каждый объект в моем $scope.carList массиве установлен в false.

Тогда, как вы можете видеть в моем html, я делаю ng-click="modelRow.activeRow = car.name; car.showDetails = !car.showDetails".
Он отлично работает, но когда я нажимаю, например, на "Volkswagen Golf" строке, затем на "Ford Focus hatchback", а затем снова на "Volkswagen Golf" строке, таблица не появится.

Это происходит потому, что, когда я нажимаю немного на любых строках "showDetails" значения в массиве $scope.carList устанавливается true не false значения.

Как я могу исправить эту проблему или альтернативный способ достижения своей цели?

Примечание: Также мне нужно решение, которое не замедлит мой сайт, (мой $scope.carList массив сотни автомобилей)

Answer 1

1. Заставьте ShowDetails 'глобальную переменную, не связанную с автомобилем.
2. сделать функцию для ng-click = "func (car)".

$scope.func = function(car) { 
 
      if (!$scope.showDetails) {// open info 
 
      $scope.showDetails = true; 
 
      } else if ($scope.modelRow.activeRow = car.name && $scope.showDetails) { 
 
       // info was opened for, closing 
 
      $scope.showDetails = false; 
 
      } else { //info was opened, we open new one 
 
      $scope.showDetails = true; 
 
      } 
 
      $scope.modelRow.activeRow = car.name; 
 
    }