在angularjs中显示和隐藏表格行

Posted 2023-03-05

【中文标题】在angularjs中显示和隐藏表格行

【英文标题】：Show and hide table rows in angularjs

【发布时间】：2015-03-25 13:41:08

【问题描述】：

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

其次，当我点击一个"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 中获得一些想法吗？

【问题讨论】：

你不能有多个同名的id；但是，您可以有多个类。听起来您所描述的称为手风琴，您可能可以使用一个 Angular 模块。我知道 Angular Bootstrap 有一个。 angular-ui.github.io/bootstrap

您可能想要的是ng-repeat-start 和ng-repeat-end。这将允许您将数据放在一行中，并将包含在另一行中，所有这些都在同一个子范围内。不要认为 ID 有角度，数据模型驱动 DOM 操作。您想使用 ng-show 、 ng-hide 等

感谢您的想法

【参考方案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

【讨论】：

现在明白了。非常感谢:)

谢谢！如果您想在单击时再次隐藏展开的行： Set isShow to -1 if isShow === index