Показать и скрыть строки таблицы в angularjs

Question

Во-первых, я хотел бы показать все имя по имени "main строки и скрыть все именованные "review" строк.

Во-вторых, когда я нажимаю на один "main Я хотел бы показать один "review" грести под этим "main строка.

Третий шаг, а потом, когда я снова нажимаю на другой "main один ряд "review" строка будет показана под этим "main строка, которую я нажал, и первый "review" строка должна быть скрыта.

В заключение я покажу только один "review" строка в зависимости от "main строка, которую я нажал, и скрыть все остальные "review" строки для пользователя.

<tbody ng-repeat="(id,product) in products" ng-controller="ProductMainCtrl as main">
<tr id="main" ng-click="parseProductId(product.product_id)">
  <td>{{product.product_id}}</td>
  <td>{{product.name}}</td>
  <td>{{product.quantity}}</td>
  <td>{{order.currency_code}} {{product.unit_price}}</td>
  <td>{{order.currency_code}} {{product.unit_discount}}</td>
  <td>{{order.currency_code}} {{product.price}}</td>
  <td id="arrow"><a>Write A Review</a></td>
</tr>
<tr id="review">
  <td colspan="7">
    <span ng-include="'views/product/rating_main.html'"></span>
  </td>
</tr>
</tbody>

Могу ли я получить некоторые идеи для этого с угловым?

Answer 1

Вы можете добавить ng-show к вашей строке обзора и судите, что показать, по какой строке ваш клик с $index лайк:

<tbody ....>
  ...
  <tr id="review" ng-show'isShow == $index'>
    <td colspan="7">
    <span ng-include="'views/product/rating_main.html'"></span>
  </td>
  </tr>
  ...
</tbody>

И добавить функцию щелчка, чтобы изменить isShow число:

...
<tr id="main" ng-click="parseProductId(product.product_id);changeShow($index)">
...

Затем определите changeShow функция в контроллере:

$scope.changeShow = function(index){
  $scope.isShow = index;
}

Понял.

Образец здесь