Anzeigen und Ausblenden von Tabellenzeilen in angularjs

Question

Zuerst möchte ich alle ID-Namen "main Zeilen zeigen und alle ID mit Namen "review" Zeilen ausblenden.

Zweitens, wenn ich auf eine "main Zeile klicke, würde ich gerne eine "review" Zeile unter dieser "main Zeile anzeigen.

Dritter Schritt, und wenn ich dann wieder Sie auf einem anderen "main Reihe, eine "review" Reihe wird im Rahmen dieser "main Zeile angezeigt werden, die ich angeklickt, und die erste "review" Zeile sollen versteckt werden.

Zusammenfassend, ich werde nur eine "review" Zeile zeigen, abhängig von der "main Zeile, die ich geklickt habe, und ausblenden Sie alle anderen "review" Zeilen an Benutzer.

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

Könnte ich ein paar Ideen dafür mit eckigen bekommen?

Answer 1

Sie können eine ng-show auf einen Beitrag Reihen- und beurteil, die mit $index wie durch welche Zeile Sie hier klicken, um zu zeigen:

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

und eine Klick-Funktion hinzufügen isShow Nummer zu ändern:

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

Dann definieren Sie changeShow Funktion in der Steuerung:

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

Verstanden.

Eine Probe here