在angularjs中显示和隐藏表行

发布时间：2020-12-17 09:56:56 所属栏目：安全来源：网络整理

导读：首先,我想显示所有名为“主行并隐藏所有名为”审核“行的id. 其次,当我点击一个“主行”时,我想在此“主行”下显示一行“评论”行. 第三步,然后当我再次点击另一个“主行,一个”评论“行将显示在我点击的主要行下面,并且应该隐藏第一个”评论“行. 总之,我将

首先,我想显示所有名为“主行并隐藏所有名为”审核“行的id.

其次,当我点击一个“主行”时,我想在此“主行”下显示一行“评论”行.

第三步,然后当我再次点击另一个“主行,一个”评论“行将显示在我点击的主要行下面,并且应该隐藏第一个”评论“行.

总之,我将只显示一个“评论”行,具体取决于我点击的“主行”,并向用户隐藏所有其他“评论”行.

<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>

我可以用角度来获得一些想法吗？

您可以在审核行中添加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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!