角度JS表格行显示/隐藏答案

【问题标题】：angular JS table row show/hide角度JS表格行显示/隐藏
【发布时间】：2015-07-14 05:30:02
【问题描述】：

<table >    

   <thead>
    <tr >
      <th>Honda</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>CRV</td>
      <td>HRV</td>
      <td>Accord</td>
   </tr>
   </tbody> 

   <tr>
      <th>Toyota</th>
    </tr>
  </thead>
  <tbody >
    <tr>
      <td>Camry</td>
      <td>Corolla</td>
  </tr>
   </tbody> 

</table>

我需要显示/隐藏表格行。此表单最初应隐藏汽车模型，仅显示本田和丰田。当您单击本田时，它应该显示所有本田的型号。如何在 angualr js 中实现这一点。请帮帮我。

【问题讨论】：

向我们展示您迄今为止尝试过的代码...

标签： angularjs html-table show-hide

【解决方案1】：

您可以使用 Angular js 的 ng-hide 和 ng-show 选项。它需要布尔值，可以在没有点击事件的情况下启动。

<table >    

   <thead ng-show="showHonda">
    <tr >
      <th>Honda</th>
    </tr>
  </thead>

  <tbody  ng-hide="showHonda">
    <tr>
      <td>CRV</td>
      <td>HRV</td>
      <td>Accord</td>
   </tr>
   </tbody> 
  <thead ng-show="showToyota">
   <tr>
      <th>Toyota</th>
   </tr>
  </thead>
  <tbody  ng-hide="showToyota">
    <tr>
      <td>Camry</td>
      <td>Corolla</td>
  </tr>
   </tbody> 

</table>

在 ng-click 事件中相应地更改 showHonda 和 showToyota 的值。

【讨论】：

【解决方案2】：

<table ng-app="myApp" ng-controller="customersCtrl">

            <thead>
                <tr data-ng-click="ShowHonda=!ShowHonda">
                    <th>Honda</th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-show="ShowHonda">
                    <td>CRV</td>
                    <td>HRV</td>
                    <td>Accord</td>
                </tr>
            </tbody>

            <tr data-ng-click="ShowToyota=!ShowToyota">
                <th>Toyota</th>
                </trdata-ng-click>
                </thead>
            <tbody>
                <tr data-ng-show="ShowToyota">
                    <td>Camry</td>
                    <td>Corolla</td>
                </tr>
            </tbody>

        </table>

脚本：-

 var myAngApp = angular.module('myApp', []);
        myAngApp.controller('customersCtrl', function ($scope) {
            $scope.ShowHonda = false;
            $scope.ShowToyota = false;

        });

【讨论】：