在 angularjs 中显示和隐藏 table 行

Question

首先，我想显示所有名为 "main 的行并隐藏所有名为 "review" 的行。

其次，当我单击一个 "main 行时，我想在此 "main 行下显示一个 "review" 行。

第三步，然后当我再次点击另一个"main行时，我点击的"main行下面会显示一个"review"行，第一个"review" 行应该被隐藏。

总之，根据我单击的 "main 行，我将只显示一个 "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>

我可以通过 angular 获得一些想法吗？

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

在 angularjs 中显示和隐藏 table 行

Show and hide table rows in angularjs

html-table

show

hide

angularjs