someone new someone new - 5 months ago 74
AngularJS Question

AngularJS: hide column on button click

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

enter image description here

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

Answer

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="angular.js@1.2.x" 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>

`