Question

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

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

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

总之，根据我点击的"review"行，我只会显示一行"main行，并向用户隐藏所有其他"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

在angularjs中显示和隐藏表行

1 个答案: