CODEWITHSUNDEEP
javascriptangularjsdynamicng-style
PJDW
PJDW

Reputation: 145

How to update element style on click with ng-style

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.

Upvotes: 3

Views: 4846

Answers (3)

zam
zam

Reputation: 328

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'
           }
},

Upvotes: 3

Christian Bonato
Christian Bonato

Reputation: 1306

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)?

Upvotes: 0

MarcoS
MarcoS

Reputation: 17711

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...

Upvotes: 0

Related Questions