「AngularJS入門」ng-classディレクティブのサンプル

2020年11月30日

構文
<element ng-class="expression"></element>
<要素 class="ng-class: {expression};">
some code
</要素>
説明
ng-classは追加されるすべてのクラスをデータバインディングします、動的にhtml要素に対してCSS用
のクラスを設定します。
htmlコード

head>
<meta charset="utf-8">
<script src="/angular.js/1.4.6/angular.min.js"></script>
<style>
.sky {
    color:white;
    background-color:lightblue;
    padding:15px;
    font-family:"Courier New";
}
.cft {
    background-color:coral;
    padding:30px;
    font-family:Verdana;
}
</style>
</head>

JSコード

<body ng-app="">
<p>select class:</p>
<select ng-model="elementInfo">
<option value="sky">sky class</option>
<option value="cft">cft class</option>
</select>

<div ng-class="elementInfo">
  <h1>Abc this is a sample</h1>
  <p>You get a good information</p>
</div>

AngularJS

Posted by arkgame