在angularjs中显示和隐藏表格行

Question

首先，我想显示所有名为 "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 中获得一些想法吗？

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