How to update element style on click with ng-style

angularjs, dynamic, javascript, ng-style

Solution

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

Problem

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.

Original source