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

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

во-вторых, когда я нажимаю на один "main row, я хотел бы показать один "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>

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

6
angularjs hide html-table show

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;
}

получил его.

пример здесь

9