Hussain Hussain - 6 months ago 107
jQuery Question

Get hidden columns of smart table in Dropdownlist AngularJS

I am new to AngularJS, can anyone help in achieving this.
I have a smart table with 4 columns, initially I am setting

col 3
and
col 4
to
ng-show=false
, so when I load the page only
col 1
and
col 2
are getting displayed. It's well and good till here.

my question:
Can I have
col3
and
col4
in a dropdown so that the user can click and make those columns visible.

Visible columns should be not available in the dropdown, suppose if
col1
,
col2
,
col3
are visible, then only
col4
is to be shown in dropdown.

Thanks in advance.



var myApp = angular.module("myModule", ['smart-table']);

myApp.controller('customCtrl', function ($scope) {

var rowCollection = [
{ col1: "a", col2: "b", col3: "c", col4: "d" },
{ col1: "a1", col2: "b1", col3: "c1", col4: "d1" },
{ col1: "a2", col2: "b2", col3: "c2", col4: "d2" },
{ col1: "a3", col2: "b3", col3: "c3", col4: "d3" },
{ col1: "a4", col2: "b4", col3: "c4", col4: "d4" },
{ col1: "a5", col2: "b5", col3: "c5", col4: "d5" },

];


$scope.rowCollection = rowCollection;


});

table {
border-collapse: collapse;
font-family: Arial;
}

.tablerow:hover {
background-color: #25CCDA;
}

td {
border: 1px solid black;
padding: 5px;
}

th {
border: 1px solid black;
padding: 5px;
text-align: center;
background-color: #999999;
cursor:pointer;
}

<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/smart-table.debug.js"></script>
<link href="Style.css" rel="stylesheet" />
</head>
<body ng-controller="customCtrl">
<select>
<option value="add column">add column</option>

</select>
<br />
<br />
<table st-table="rowCollection">

<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th ng-show="col3">col3</th>
<th ng-show="col4">col4</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection">
<td>{{ row.col1 }}</td>
<td>{{ row.col2 }}</td>
<td ng-show="col3">{{ row.col3 }}</td>
<td ng-show="col4">{{ row.col4 }}</td>
</tr>
</tbody>
</table>
</body>
</html>




Answer

Have a look at the following work around

var myApp = angular.module("myModule", []);
myApp.controller('customCtrl', function($scope) {

  $scope.enableColumns = function(header) {
    header.visible = true;
  };
  $scope.colHeaders = [{
    name: "col1",
    visible: true
  }, {
    name: "col2",
    visible: true
  }, {
    name: "col3",
    visible: false
  }, {
    name: "col4",
    visible: false
  }]
  var rowCollection = [{
      col1: "a",
      col2: "b",
      col3: "c",
      col4: "d"
    }, {
      col1: "a1",
      col2: "b1",
      col3: "c1",
      col4: "d1"
    }, {
      col1: "a2",
      col2: "b2",
      col3: "c2",
      col4: "d2"
    }, {
      col1: "a3",
      col2: "b3",
      col3: "c3",
      col4: "d3"
    }, {
      col1: "a4",
      col2: "b4",
      col3: "c4",
      col4: "d4"
    }, {
      col1: "a5",
      col2: "b5",
      col3: "c5",
      col4: "d5"
    }

  ];


  $scope.rowCollection = rowCollection;


});
table {
  border-collapse: collapse;
  font-family: Arial;
}

.tablerow:hover {
  background-color: #25CCDA;
}

td {
  border: 1px solid black;
  padding: 5px;
}

th {
  border: 1px solid black;
  padding: 5px;
  text-align: center;
  background-color: #999999;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myModule">

<head>
</head>

<body ng-controller="customCtrl">
  <select ng-model="selectedItem" ng-change="enableColumns(selectedItem)" ng-options="header.name for header in colHeaders|filter:{visible: false}">
  </select>
  <br />
  <br />
  <table>

    <thead>
      <tr>
        <th ng-repeat="header in colHeaders" ng-show="header.visible">{{header.name}}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in rowCollection">
        <td ng-repeat="header in colHeaders" ng-show="header.visible">{{ row[header.name] }}</td>
      </tr>
    </tbody>
  </table>
</body>

</html>