Show and hide table rows in angularjs

Question

First, I would like to show all id named "main rows and hide all id named "review" rows.

Second, when I click on one "main row, I would like to show one "review" row under this "main row.

Third step, And then when I click again on another "main row, one "review" row will be shown under this "main row that I clicked, and the first "review" row should be hidden.

In conclusion, I will show only one "review" row depending on the "main row that I clicked, and hide all other "review" rows to user.

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

Could I get some ideas for that with angular?

Answer 1

You can add an ng-show to your review row and judge which to show by which row your click with $index like:

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

And add a click function to change isShow number:

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

Then define changeShow function in controller:

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

Got it.

A sample here