How to update element style on click with ng-style

Question

I need to update the size of a div when I click on a specific button.

This is the code for resizing the div

   $scope.ResizeBand = function(dashboard)
            {
                StateToUpdate(dashboard);
                dashboard.Height = dashboard.Height + DashboardHeightIncrease;
            };

When I use the code below in my template, everything works as expected

            <div class="col-xs-12 col-sm-6 col-md-{{widgetitem.ColumnWidth}}"  style="height:{{dashboard.Height}}">

unfortunately, this doesn't work in IE (11), and it's recommanded to use the ng-style attribute. So I changed

            <div class="col-xs-12 col-sm-6 col-md-{{widgetitem.ColumnWidth}}" ng-style="{'height':'{{dashboard.Height}}' + 'px'}">

But when I click on the button, nothing happens.

Answer 1

try like this(work for me in ie11)

html:

ng-style="calculateCircuitGroup(circuit.numberOfPoles)"

controller

$scope.calculateCircuitGroup : function(numberOfPoles) {
    return {
        width  : (numberOfPoles * CIRCUIT_WIDTH) + 'px'
           }
},

Answer 2

You can't embed Angular syntax ({{ ... }}) inside a class element...
You should use ng-class ...

And note that using '{{dashboard.Height}}' (Angular syntax inside quotes) will not be evaluated by Angular, but left as-is...

Answer 3

DId you try

           <div class="col-xs-12 col-sm-6 col-md-{{widgetitem.ColumnWidth}}" 
            ng-style="{'height': dashboard.Height+'px'}">

(without brackets at all)?