Jak ustawić szerokość div za pomocą stylu ng

79

Próbuję ustawić szerokość div dynamicznie, ng-styleale nie stosuję stylu. Oto kod:

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

Kontroler:

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

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

});

czego mi brakuje?

Fiddle link: Fiddle

user3049403
źródło

Odpowiedzi:

139

Składnia ng-stylenie jest taka. Akceptuje słownik kluczy (nazw atrybutów) i wartości (wartość, którą powinny przyjmować, pusty ciąg usuwa je), a nie tylko ciąg. Myślę, że chcesz tego:

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

A potem w kontrolerze:

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

Pozwala to zachować separację szablonu i kontrolera: kontroler przechowuje wartości semantyczne, podczas gdy szablon odwzorowuje je na poprawną nazwę atrybutu.

musically_ut
źródło
11
Słownik kluczy… sprawił, że się uśmiechnąłem. Cóż za wymowny opis kolejnego obiektu JS.
Steve K.
35

ngStyle akceptuje mapę:

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

Fiddle

AlwaysALearner
źródło