「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>
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>