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

Question

我试图动态设置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";

});

我错过了什么？

小提琴链接:小提琴

Answer 1

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

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

然后在你的控制器中:

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

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

Answer 2

ngStyle 接受地图:

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

Fiddle