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 リファレンスマニュアル