Показать и скрыть строки таблицы в angularjs

Question

Во-первых, я хотел бы показать весь идентификатор с именем "main строк и скрыть весь идентификатор с именем "review" строк.

Во-вторых, когда я нажимаю на одну строку "main, я бы хотел показать номер "review" рядом с этим "main row.

Третий шаг, а потом, когда я снова нажмите на другой "main подряд, один "review" строка будет отображаться под этой "main строки, я щелкнул, и первый "review" строка должна быть скрыта.

В заключение я покажу только одну строку "review" в зависимости от строки, которую я нажал, и спрятал все остальные "review" строк пользователю.

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

Могу ли я получить некоторые идеи для этого с угловыми?

Answer 1

можно добавить ng-show к вашей строке обзора и судьи, которые, чтобы показать, на какой строке вашего нажмите с $index как:

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

и добавить функцию Нажмите, чтобы изменить isShow номер:

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

Затем определите changeShow Функция в контроллере:

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

Получил это.

Образец here