angular JS table row show/hide

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>

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.

show us the code that you've tried so far...

Bhojendra Rauniyar
– Bhojendra Rauniyar

2015-07-14 05:35:10 +00:00
Commented Jul 14, 2015 at 5:35 — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Jul 14, 2015 at 5:35

Rajeev · Accepted Answer · 2015-07-14 05:49:20Z

1

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.

answered Jul 14, 2015 at 5:49

Rajeev

414 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vaibhav · Accepted Answer · 2015-07-14 05:49:05Z

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

        });

Collectives™ on Stack Overflow

angular JS table row show/hide

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related