AngularJS ng-style 지시어

AngularJS 참조 매뉴얼

정의와 사용법

ng-style 지시어는 HTML 요소의 style 속성

ng-style 속성의 값은 객체 또는 객체를 반환하는 표현식이어야 합니다。

이 객체는 키밸류형의 CSS 속성과 값을 포함하고 있습니다。

예제

CSS 키와 값의 객체를 사용하여 AngularJS를 통해 스타일을 추가합니다：

<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-style="myObj">반갑습니다</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>

직접 시도해보세요

문법

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

모든 HTML 요소가 지원됩니다.

파라미터

파라미터 설명
expression 표현식, CSS 속성이 키이고 CSS 값이 값인 객체를 반환합니다.

AngularJS 참조 매뉴얼