Question

<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中实现这一目标。请帮帮我。

Answer 1

你可以使用角度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的值。

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

        });

角JS表行显示/隐藏

2 个答案: