如何使用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"; }); 

我错过了什么?

小提琴链接: 小提琴

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

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

然后在你的控制器中:

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

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

ngStyle接受一个地图:

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

小提琴