css - modificar - Cómo configurar ancho de div utilizando ng-style

ng-style background color

Question

Estoy intentando establecer el ancho de div dinámicamente utilizando ng-style pero no aplica el estilo. Aquí está el código:

<div style="width: 100%;" id="container_fform" ng-controller="custController">
    <div style="width: 250px;overflow: scroll;">
        <div ng-style="myStyle">&nbsp;</div>
    </div>
</div>

Controlador:

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

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

});

¿Qué me estoy perdiendo?

Fiddle link: Fiddle

Answer 1

La sintaxis de ng-style no es exactamente eso. Acepta un diccionario de claves (nombres de atributos) y valores (el valor que deben tomar, una cadena vacía los desarma ) en lugar de solo una cadena. Creo que lo que quieres es esto:

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

Y luego en tu controlador:

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

Esto preserva la separación de la plantilla y el controlador: el controlador mantiene los valores semánticos mientras la plantilla los asigna al nombre de atributo correcto.

Answer 2

ngStyle acepta un mapa:

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

Fiddle