如何使用ng-style设置div宽度


79

我正在尝试使用动态设置div宽度ng-style,但未应用样式。这是代码:

<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";

});

我想念什么?

小提琴链接:小提琴

Answers:


139

的语法ng-style不尽相同。它接受键(属性名称)和值的字典(他们应该采取的价值,一个空字符串取消设置它们),而不是只有一个字符串。我认为您想要的是:

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

然后在您的控制器中:

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

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


11
钥匙字典。。。让我微笑。只是对另一个JS对象的精妙描述。
Steve K

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.