如何使用NG样式设置DIV的宽度 [英] How to set div width using ng-style

问题描述

我想动态设置宽度的div使用 NG-风格但不应用样式。这里是code：

I am trying to set the div width dynamically using ng-style but it is not applying the style. Here is the code:

<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-风格的语法并不完全是。它接受键（属性名称）和值的字典（他们应该采取的价值，一个空字符串的取消设置的他们），而不是只是一个字符串。我想你想要的是这样的：

The syntax of ng-style is not quite that. It accepts a dictionary of keys (attribute names) and values (the value they should take, an empty string unsets them) rather than only a string. I think what you want is this:

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

然后在你的控制器：

And then in your controller:

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

这preserves模板的分离和控制器：当模板将它们映射到正确的属性名称的控制器都包含语义值

This preserves the separation of template and the controller: the controller holds the semantic values while the template maps them to the correct attribute name.

这篇关于如何使用NG样式设置DIV的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！