Clever Geek Handbook

How to update the style of an element on click using ng-style

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

This is the code to resize 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 he recommended using 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.

+3


source to share


3 answers


try this (work for me in ie11)

HTML:

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


controller

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


source


You cannot insert Angular ( {{ ... }}

) syntax inside an element class

...
You must use ng-class ...



And note that using '{{dashboard.Height}}'

(Angular syntax inside quotes) will not be evaluated with Angular, but leave as is ...

0


source


ACCEPT

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

(no brackets at all)?

0


source






More articles:


All Articles