AngularJS ng-styleDirektive
AngularJS-ReferenzhandbuchAngularJS-Beispiel
Stile mit AngularJS hinzufügen, im CSS-Schlüssel=>Wert-Objektformat:
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-style="myObj">Beispiel-Tutorial</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = {
"color" : "white",
"background-color" : "coral",
"font-size" : "60px",
"padding" : "50px"
}
});
</script>
</body>
<h1 ng-style="myObj">Beispiel-Tutorial</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = {
"color" : "white",
"background-color" : "coral",
"font-size" : "60px",
"padding" : "50px"
}
});
</script>
</body>
Selbst ausprobieren »
Definition und Verwendung
ng-styleDie Direktive fügt HTML-Elementen ein style-Attribut hinzu.
ng-styleDer Attributwert muss ein Objekt sein, und auch der Ausdruck gibt ein Objekt zurück.
Das Objekt besteht aus CSS-Eigenschaften und -Werten, d. h. Schlüssel=>Wert-Paaren.
Syntax
<element ng-style="expression"></element>
Alle HTML-Elemente unterstützen dieses Attribut.
Parameterwert
| Wert | Beschreibung |
|---|---|
| string | Der Ausdruck gibt ein Objekt zurück, das aus CSS-Eigenschaften und -Werten besteht. |
Andere Erweiterungen