web-dev-qa-db-ja.com

anglejsでテーブル行を表示および非表示

まず、"main行という名前のすべてのIDを表示し、"review"行という名前のすべてのIDを非表示にします。

次に、1つの"main行をクリックすると、この"review"行の下に1つの"main行が表示されます。

3番目のステップ、そして別の"main行をもう一度クリックすると、クリックしたこの"review"行の下に1つの"main行が表示され、最初の"review"行が表示されます。隠されます。

結論として、クリックした"review"行に応じて"main行を1つだけ表示し、他のすべての"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でそのためのアイデアをいくつか得ることができますか？

angularjshtml-tablehideshow
7
spider

レビュー行に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;
}

とった。

サンプル ここ

10
dddd1919