在angularjs中显示和隐藏表行

Question

首先,我想显示所有id命名"main行并隐藏所有id命名"review"行.

其次,当我点击"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;
}

得到它了.

样本在这里