CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-bindingsadapt-strap
J145
J145

Reputation: 699

Angular scope change not updating adapt-strap table column visibility

I am wondering if anyone could help me out, I have been trying to get something to work now for a while and am making little to no progress. I am making use of angularjs and bootstrap and also adapt-strap which is basically a lightweight ui component based on angular and bootstrap. To try and simplify my issue I have created a fork of an existing fiddle and changed the code slightly.

http://jsfiddle.net/me397squ/3/

In the fiddle linked above I'm using adapt-strap to create and display the table. For the model column I want to hide/show that column dependent on specific criteria so I am creating a scope variable called visibleProperty and setting it to true (line 100 in jsfiddle). I then use this variable as the visible property for the table (line 108) as can be seen below. If I initially set it to true the column shows, if I initially set it to false the column is hidden. As you would expect.

  $scope.carsTableColumnDefinition = [
  {
    columnHeaderDisplayName: 'Model',
    displayProperty: 'name',
    sortKey: 'name',
    columnSearchProperty: 'name',
    visible: $scope.visibleProperty
  },

My issue is that a later section of the code updates this field (line 149), say it is initially set to true and changes to false, however the column does not then hide. It only appears to take the initial value that was given and when the scope variable changes it makes no difference. I have confirmed the scope variable is changing as intended by outputting it in the "model column visible property" column of the table.

Is there any way to get the column to hide/show when $scope.visibleProperty is updated? This issue is starting to drive me crazy and I would be really appreciative of any help you can give.

Thanks.

Upvotes: 0

Views: 116

Answers (1)

Joe Hawkins
Joe Hawkins

Reputation: 9971

You should bind your column definition to a function rather than an array. That way every time a $digest cycle happens the function will be executed and the table definition will be updated.

<ad-table-lite table-name="carsForSale"
             enable-column-search="true"
             column-definition="getCarsTableColumnDefinition()"
             ...

You controller will then look like this:

$scope.getCarsTableColumnDefinition = function() {
    return [
        {
            columnHeaderDisplayName: 'Model',
            displayProperty: 'name',
            sortKey: 'name',
            columnSearchProperty: 'name',
            visible: $scope.visibleProperty
        },
        ...];
};

duplicate:Adapt-strap/angular dynamic table column

Upvotes: 0

Related Questions