【问题标题】:How to set div width using ng-style如何使用 ng-style 设置 div 宽度
【发布时间】:2013-12-15 17:42:17
【问题描述】:

我正在尝试使用ng-style 动态设置 div 宽度,但它没有应用样式。代码如下:

<div style="width: 100%;" id="container_fform" ng-controller="custController">
    <div style="width: 250px;overflow: scroll;">
        <div ng-style="myStyle">&nbsp;</div>
    </div>
</div>

控制器:

var MyApp = angular.module('MyApp', []);

var custController = MyApp.controller('custController', function ($scope) {
    $scope.myStyle="width:'900px';background:red";

});

我错过了什么?

小提琴链接:Fiddle

【问题讨论】:

    标签: css angularjs ng-style


    【解决方案1】:

    ng-style 的语法并不完全一样。它接受键(属性名称)和值(它们应该采用的值,一个空字符串 unsets 它们)的字典,而不仅仅是一个字符串。我想你想要的是这样的:

    <div ng-style="{ 'width' : width, 'background' : bgColor }"></div>
    

    然后在你的控制器中:

    $scope.width = '900px';
    $scope.bgColor = 'red';
    

    这保留了模板和控制器的分离:控制器保存语义值,而模板将它们映射到正确的属性名称。

    【讨论】:

    • 钥匙字典....让我笑了。对另一个 JS 对象的描述多么雄辩。
    【解决方案2】:

    ngStyle 接受地图:

    $scope.myStyle = {
        "width" : "900px",
        "background" : "red"
    };
    

    Fiddle

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-09-16
      • 2021-01-06
      • 1970-01-01
      • 1970-01-01
      • 2013-06-23
      • 1970-01-01
      相关资源
      最近更新 更多