Hiển thị và ẩn các hàng trong bảng angularjs

Question

Trước tiên, tôi muốn hiển thị tất cả id có tên "main hàng và ẩn tất cả id có tên là "review" hàng.

Thứ hai, khi tôi nhấp vào một hàng "main, tôi muốn hiển thị một hàng "review" bên dưới hàng "main này.

bước thứ ba, Và sau đó khi tôi bấm một lần nữa vào "main hàng khác, một "review" hàng sẽ được hiển thị dưới dòng này "main mà tôi nhấp, và "review" hàng đầu tiên nên được ẩn.

Tóm lại, tôi sẽ chỉ hiển thị một "review" hàng tùy thuộc vào hàng "main mà tôi nhấp, và ẩn tất cả "review" hàng khác để sử dụng.

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

Tôi có thể nhận được một số ý tưởng cho điều đó với góc cạnh không?

Answer 1

Bạn có thể thêm một ng-show để hàng đánh giá của bạn và thẩm phán cho phép hiển thị mà hàng nhấp chuột của bạn với $index như:

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

Và thêm một chức năng nhấp chuột để thay đổi isShow số:

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

Sau đó, xác định chức năng changeShow trong bộ điều khiển:

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

OK.

Một mẫu here