AngularJS tutorial ng style instruction simple example

2021-07-07 06:28:14
OfStack

AngularJS ng-style Directive

AngularJS instance

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


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-style="myObj"> Rookie 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>
</html>

Definition and usage

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

The ng-style property value must be an object, and the expression returns an object.

Objects are registered with CSS attributes and values, that is, key = > value right.

Grammar

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

All HTML elements support this attribute.

Parameter value

值	描述
string	表达式返回由 CSS 属性和值组成的对象。

The above is the AngularJS ng-style instructions of the data collation, follow-up to continue to supplement, thank you for your support of this site!