如何使用ng样式单击时更新元素样式

How to update element style on click with ng-style

本文关键字：样式 更新 元素 单击 ng 何使用      更新时间：2023-09-26
当我

单击特定按钮时，我需要更新div的大小。

这是调整div 大小的代码

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

当我在模板中使用以下代码时，一切都按预期工作

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

不幸的是，这在IE（11）中不起作用，并且建议使用ng样式属性。所以我改变了 

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

但是当我点击按钮时，没有任何反应。

尝试这样做（在IE11中为我工作）

.html：

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

控制器

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

class元素中嵌入 Angular 语法 （ {{ ... }} ） ...
你应该使用ng级...

请注意，使用 '{{dashboard.Height}}'（引号内的 Angular 语法）不会被 Angular 评估，而是保持原样......

你试试 

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

（完全没有括号）？

相关文章：