web-dev-qa-db-fra.com

Comment définir la largeur de div en utilisant ng-style

J'essaie de définir dynamiquement la largeur de div à l'aide de ng-style, mais le style n'est pas appliqué. Voici le 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>

Manette:

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

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

});

Qu'est-ce que je rate?

Lien de violon: violon

cssangularjsng-style
77
user3049403

La syntaxe de ng-style n'est pas tout à fait cela. Il accepte un dictionnaire de clés (noms d'attributs) et de valeurs (la valeur qu'elles doivent prendre, une chaîne vide nsets eux) plutôt que seulement une chaîne. Je pense que ce que vous voulez, c'est ceci:

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

Et puis dans votre contrôleur:

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

Cela préserve la séparation du modèle et du contrôleur: le contrôleur conserve les valeurs sémantiques tandis que le modèle les mappe sur le nom d'attribut correct.

136
musically_ut

ngStyle accepte une carte:

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

Fiddle

35
AlwaysALearner