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 try

Solution 1:

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.