Pokazywanie i ukrywanie wierszy tabeli w angularjs

Question

Najpierw chcę wyświetlić wszystkie identyfikatory o nazwach "main i ukryć wszystkie wiersze o nazwach "review".

Po drugie, gdy kliknę na jeden wiersz "main, chciałbym wyświetlić jeden wiersz "review" pod tym rzędem "main.

Trzeci krok, a gdy klikam ponownie na innym "main rzędzie, jeden "review" wiersz zostanie pokazany w ramach niniejszego "main rzędzie że kliknąłem, a pierwszy "review" wiersz powinien być ukryty.

Podsumowując, pokażę tylko jeden wiersz "review" w zależności od wiersza "main, który kliknąłem i ukryję wszystkie inne wiersze "review" dla użytkownika.

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

Czy mogę uzyskać pewne pomysły na to z kątem?

Answer 1

Można dodać ng-show do swojej przeglądarki rzędu i sędziego, który, aby pokazać, w którym rząd click z $index jak:

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

i dodać funkcję Kliknij, aby zmienić isShow numer:

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

Następnie zdefiniuj funkcję changeShow w kontrolerze:

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

Mam to.

Próbka here