Cómo establecer el ancho de div usando ng-style


79

Estoy tratando de establecer el ancho div dinámicamente usando ng-stylepero no estoy aplicando 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?

Enlace de violín : violín

Respuestas:


139

La sintaxis de ng-styleno 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 contiene los valores semánticos mientras que la plantilla los asigna al nombre de atributo correcto.


11
Diccionario de claves .... me hizo sonreír. Qué descripción tan elocuente para otro objeto JS.
Steve K

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.