Как установить ширину div с помощью ng-style

Я пытаюсь динамически установить ширину div, используя ng-style, но стиль не применяется. Вот код:

<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";

});

Что мне не хватает?

Ссылка на скрипку: Fiddle


css angularjs ng-style
person user3049403    schedule 29.11.2013    source источник

Ответы (2)


arrow_upward
140
arrow_downward

Синтаксис ng-style не совсем такой. Он принимает словарь ключей (имен атрибутов) и значений (значение, которое они должны принимать, пустая строка сбрасывает их), а не только строку. Я думаю, что вы хотите это:

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

И затем в вашем контроллере:

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

Это сохраняет разделение шаблона и контроллера: контроллер содержит семантические значения, а шаблон сопоставляет их с правильным именем атрибута.

person musically_ut    schedule 29.11.2013
comment
Словарь Ключей... заставил меня улыбнуться. Какое красноречивое описание еще одного JS-объекта. - person Steve K; 25.11.2015

arrow_upward
35
arrow_downward

ngStyle принимает карту:

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

Скрипка

person AlwaysALearner    schedule 29.11.2013