CODEWITHSUNDEEP
angularjshtml-tableshow-hide
Gogs
Gogs

Reputation: 139

angular JS table row show/hide

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

I have a requirement to show / hide table row. This form should hide the car model initially and show only Honda and Toyota. when you click Honda, it should show all the honda's model. How to achieve this in angualr js. Please help me.

Upvotes: 0

Views: 4816

Answers (2)

Rajeev
Rajeev

Reputation: 41

you can use ng-hide and ng-show option of angular js. It takes boolean which can be initiated no click event.

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

and on ng-click event change the value of showHonda and showToyota accordingly.

Upvotes: 1

Vaibhav
Vaibhav

Reputation: 447

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

Script :-

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

        });

Upvotes: 0

Related Questions