So stellen Sie die Div-Breite mit ng-style ein

Ich versuche, die div-Breite dynamisch mit zu setzen, ng-styleaber es wird der Stil nicht angewendet. Hier ist der 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>

Regler:

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

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

});

Was vermisse ich?

Geigenlink: Geige

Die Syntax von ng-styleist nicht ganz das. Es akzeptiert ein Wörterbuch mit Schlüsseln (Attributnamen) und Werten (der Wert, den sie annehmen sollten, eine leere Zeichenfolge setzt sie nicht) und nicht nur eine Zeichenfolge. Ich denke, was Sie wollen, ist Folgendes:

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

Und dann in Ihrem Controller:

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

Dadurch bleibt die Trennung von Vorlage und Controller erhalten: Der Controller enthält die semantischen Werte, während die Vorlage sie dem richtigen Attributnamen zuordnet.

ngStyle akzeptiert eine Karte:

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

Fiddle