Mostrare e nascondere le righe di tabella in angularjs

Question

Innanzitutto, vorrei mostrare tutte le id denominate "main righe e nascondere tutte le id denominate "review" righe.

In secondo luogo, quando faccio clic su una riga "main, vorrei mostrare una riga "review" sotto questa riga "main.

Terzo passo, e poi quando si fa clic di nuovo su un altro "main fila, una fila "review" verrà mostrato in questo "main riga che ho cliccato, e la prima fila "review" devono essere nascosti.

In conclusione, mostrerà una sola fila "review" seconda del "main riga che ho cliccato, e nascondere tutte le altre righe "review" all'utente.

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

Posso ottenere qualche idea per questo con angolare?

Answer 1

È possibile aggiungere un ng-show per la tua opinione fila e giudice, che per indicare di quale riga vostro scatto con $index come:

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

e aggiungere una funzione di clic per cambiare isShow numero:

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

Quindi definire la funzione changeShow nel controller:

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

Capito.

Un campione here