「AngularJS入門」ng-classディレクティブのサンプル
構文
<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>
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>
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>
<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>
<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>