Show and hide table rows in angularjs

Question

First, I would like to show the entire identifier named "main rows and hide the entire identifier named "review" rows.

Secondly, when I click on one line of "main , I would like to show one line of "review" in this line of "main .

Third step. Then, when I click on another line "main , in this line "main , which I clicked, one line of "review" will be shown, and the first line of "review" should be hidden.

In conclusion, I will show only one line of "review" depending on the line "main , which I clicked, and hide all other lines of "review" for the 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> 

Can I get some ideas for this using angular?

Answer 1

You can add ng-show to your overview line and judge which line you can select with $index :

 <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 the isShow number:

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

Then define the changeShow function in the controller:

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

Got it.

Example here