AngularJS: hide column on button click

Question

I have a table with four columns and it looks like this:

I am populating the table using a Javascript array which is like this:

$scope.result = [
 [5, 3/2/2016, 4, 'Bla..bla'],
 [2, 1/4/2016, 3, 'bla..bla.bla'],
 [1, 5/6/2016, 6, 'bla'],
 [4, 2/6/2016, 5, 'blablabla'],
 [3, 3/4/2016, 4, 'bla'],
 [2, 2/4/2016, 5, 'bla'],
 [1, 2/3/2016, 6, 'blablabla'] ];

And this is my HTML:

<table class="dataTable" border="1" >
     <tr>
         <td>Number</td>
         <td>Date</td>
         <td>Time</td>
         <td>Description</td>
     </tr>
     <tr ng-repeat="row in result">
         <td ng-repeat="item in row">{{ item }}</td>
     </tr>     
</table>

Now I have four buttons each one with the name of column name.

<span>
   <button>Number</button>
   <button>Date</button>
   <button>Time</button>
   <button>Description</button>
</span>

When any of those buttons is clicked, I want to show/hide that column.

So if I click on Description button, I want to show/hide the Description column. I tried using ng-hide but couldn't get the entire column to hide, it would only hide the first table cell. So how do I do that? Thanks :)

Saurabh Sarathe · Accepted Answer · 2016-07-06 19:34:45Z

2

Are you looking for this? If Yes Please hit up for the Answer.`

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.number = true;
  $scope.date = true;
  $scope.time = true;
  $scope.dis = true;
 
 $scope.result = [
 [5, 3/2/2016, 4, 'Bla..bla'],
 [2, 1/4/2016, 3, 'bla..bla.bla'],
 [1, 5/6/2016, 6, 'bla'],
 [4, 2/6/2016, 5, 'blablabla'],
 [3, 3/4/2016, 4, 'bla'],
 [2, 2/4/2016, 5, 'bla'],
 [1, 2/3/2016, 6, 'blablabla'] ];

  $scope.toggleNumber = function(){
    if($scope.number === true)
      $scope.number = false;
    else if($scope.number === false)
      $scope.number = true;
  }
  $scope.toggleDate = function(){
    if($scope.date === true)
      $scope.date = false;
    else if($scope.date === false)
      $scope.date = true;
  }
  $scope.toggleTime = function(){
    if($scope.time === true)
      $scope.time = false;
    else if($scope.time === false)
      $scope.time = true;
  }
  $scope.toggleDis = function(){
    if($scope.dis === true)
      $scope.dis = false;
    else if($scope.dis === false)
      $scope.dis = true;
  }
  
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   <table class="dataTable" border="1" >
     <tr>
         <td ng-if="number">Number</td>
         <td ng-if="date">Date</td>
         <td ng-if="time">Time</td>
         <td ng-if="dis">Description</td>
     </tr>
     <tr ng-repeat="row in result">
         <td ng-if="number">{{row[0]}}</td>
         <td ng-if="date">{{row[1]}}</td>
         <td ng-if="time">{{row[2]}}</td>
         <td ng-if="dis">{{row[3]}}</td>
     </tr> 
     
</table><br>
<span>
   <button ng-click="toggleNumber()">Number</button>
   <button ng-click="toggleDate()">Date</button>
   <button ng-click="toggleTime()">Time</button>
   <button ng-click="toggleDis()">Description</button>
</span>
  </body>

</html>

`

answered Jul 6, 2016 at 19:34

Saurabh Sarathe

2312 silver badges11 bronze badges

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

3 Comments

Saurabh Sarathe Over a year ago

Please refer the working plunker as well plnkr.co/edit/N9Sh1nOlLewcQaGNjOzs?p=preview

Parth Bhoiwala Over a year ago

Thanks for the answer, it works nicely but I wanted the code to be such that I won't have to create different functions and $scope variables for each column. Because I can have 15 columns. So is there a way to do it using only 1 or 2 functions?

Saurabh Sarathe Over a year ago

You can write a single function and use switch case for it. It will be easy to maintain Either we can try finding a way to toggle from Angulur HTML template itself

Collectives™ on Stack Overflow

AngularJS: hide column on button click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related