AngularJS Reference Manual AngularJS Select (Selection Box)

AngularJS ng-style directive

AngularJS Example

Add styles using AngularJS, using CSS key=>value object format:

Example

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<script　src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body　ng-app="myApp"　ng-controller="myCtrl">
<h1　ng-style="myObj">Basic Tutorial Website</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>
</html>

Test and see ‹/›

Definition and Usage

ng-style The directive adds a style attribute to the HTML element.

ng-style The attribute value must be an object, and the object returned by the expression is also an object.

The object is composed of CSS properties and values, that is, key=>value pairs.

Syntax

　　　<element　ng-style="expression"></element>

All HTML elements support this attribute.

Parameter Value

Value	Description
string	The expression returns an object composed of CSS properties and values.