CODEWITHSUNDEEP
javascriptangularjsadapt-strap
J145
J145

Reputation: 699

Adapt-strap/angular dynamic table column

I was having a look at the adpt-strap table lite and was playing around with it. here is the JSfiddle that I was playing about with: http://jsfiddle.net/cx5gm0sa/ What I was trying to do and I was wondering if it is possible is to try and dynamically hide/show a column. The code I have added consists of $scope.showColumn = true; (you can see the value of this on the html page, I am printing it out at the top). When you click the buy button on any row the variable gets set to the opposite of what it was before so it alternates between true and false. 

$scope.buyCar = function (car) {
    $scope.showColumn = !$scope.showColumn
};

This variable is also what is used for the visible property of the model column, however when the variable changes the column doesn't hide/show as I would have expected, it only ever seems to hide/show depending on what value the variable was initialized with. Is there anyway to make this work dynamically as I originally expected it would have and does anyone know why it wouldnt be working that way already?

Thanks in advance for any help I may get.

Upvotes: 0

Views: 293

Answers (1)

ishmaelMakitla
ishmaelMakitla

Reputation: 3812

Got it. OK, I think the reason the table does not update is because your controller does not re-run the code that defines the table when you click the Buy button. I have changed this so that instead of assigning the array of the configs to the $scope.carsTableColumnDefinition directly, I defined a function named getDefinition that returns the array instead. Then in the $scope.buyCar = function (car){}, I then call the function.

So here are the changes I made:

$scope.carsTableColumnDefinition = getDefinition();
...
//Then inside the buyCar function I have:
$scope.buyCar = function (car) {
   $scope.showColumn = !$scope.showColumn;
   //now refresh by calling the get-definition function:
   $scope.carsTableColumnDefinition = getDefinition();
};
..
//Finally, this is my getDefinition function:
function getDefinition(){
    return [
      {
        columnHeaderDisplayName: 'Model',
        displayProperty: 'name',
        sortKey: 'name',
        columnSearchProperty: 'name',
        visible: $scope.showColumn
      },
      {
        columnHeaderTemplate: '<span><i class="glyphicon glyphicon-calendar"></i> Model Year</span>',
        template: '<strong>{{ item.modelYear }}</strong>',
        sortKey: 'modelYear',
        width: '12em',
        columnSearchProperty: 'modelYear'
      },
      {
        columnHeaderTemplate: '<span><i class="glyphicon glyphicon-usd"></i> Price</span>',
        displayProperty: 'price',
        cellFilter: 'currency',
        sortKey: 'price',
        width: '9em',
        columnSearchProperty: 'price'
      },
      {
        columnHeaderDisplayName: 'Buy',
        templateUrl: 'src/tablelite/docs/buyCell.html',
        width: '4em'
      }
    ];
    }

I updated the jsfiddle - check it out.

Upvotes: 2

Related Questions