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

我正在尝试使用ng-styledynamic设置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"; }); 

我错过了什么？

小提琴链接： 小提琴

Answer 1

ng-style的语法不是那么ng-style 。 它接受一个键（属性名）和值（它们应该采取的值，一个空string取消设置）的字典，而不是一个string。 我想你想要的是这样的：

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

然后在你的控制器中：

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

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

Answer 2

ngStyle接受一个地图：

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

小提琴