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

Question

我正在尝试使用 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>

Controller :

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

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

});

我错过了什么？

fiddle 链接:Fiddle

Answer 1

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

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

然后在你的 Controller 中:

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

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