AngularJSのng-class、ng-styleを使ってCSSを設定 | VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

AngularJSのng-class、ng-styleを使ってCSSのクラスを動的に設定したり、CSSを直接設定する事が出来ます。

デモとコードサンプルはこちら。
　
※目次をクリックすると目次の下部にコンテンツが表示されます。

１．ng-classディレクティブ
２．ng-styleディレクティブ
３．サンプルコード

ng-classディレクティブ

適用したHTML要素に動的にCSSを設定する。
　
○構文
<ANY
　ng-class=”exp”>
…
</ANY>
　
①expを評価した結果が文字列の場合
　
・スペース区切りで指定されたすべてのCSSクラスが追加される。
例）
“odd”がtrueの場合は、適用した要素に’tbl-bg-clr-odd’のCSSクラスを設定し、背景色をライトピンクにし、それ以外の場合は’tbl-bg-clr-even’のCSSクラスを設定する。
　
<li ng-class=”odd ? ‘tbl-bg-clr-odd’ : ‘tbl-bg-clr-even'”
　
<style>
　li.tbl-bg-clr-odd { background-color: lightpink; }
</style>
　
②expを評価した結果が配列の場合
　
・配列要素で指定されたすべてのCSSクラスが追加される。
例）
“danger”がtrueの場合は、適用した要素に’bg-success’,’text-danger’のCSSクラスを適用する。この例では、BootstrapのビルトインのCSSクラスを指定しています。
　
<li ng-class=”danger ? [‘bg-success’,’text-danger’]:[‘bg-danger’,’text-success’]”
　
③expがオブジェクトの場合
　
オブジェクトのキーと値のペアにおいて、値がtrueの場合は、キーに指定されている名前のCSSクラスが設定されます。
　
下記例では、dangerがtrueの場合はBootstrap3の’bg-warning’のCSSクラスが設定されます。
<ul ng-class=”{‘bg-warning’: danger}”

ng-styleディレクティブ

オブジェクトのキーと値で直接CSSの設定をする。
　
○構文
<ANY
　ng-style=”{key:’value’}”>
…
</ANY>
　
例）
<li ng-style=”{color:’red’}”>

サンプルコード

デモとコードサンプルはこちら。
　
１）ng-class、ng-styleの使用例
　
ng-classのオプジェクト指定を使って、リスト全体の背景色をチェックボックスの入力値に応じて切り替えています。
　
各リストのCSS設定をng-classの配列指定とng-styleを使って設定しています。
　

  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="danger" />ng-classでCSS設定
    </label>
  </div>
  <ul ng-class="{'bg-warning': danger}">
    <li ng-repeat="person in people">{{person.name}}
      <ul>
        <li ng-style="{color:'red'}">年齢：{{person.age}}</li>
        <li ng-class="['bg-success','text-danger']">住所：{{person.address}}</li>
      </ul>
    </li>
  </ul>

　
２）ng-class-even、ng-class-oddを使ってng-repeatの表をストライピング
　
ng-classは、ng-repeatと一緒に使用して、奇数と偶数番目の行それぞれにCSS設定をする事が出来ます。

<style>
  tr.tbl-bg-clr-odd { background-color: lightpink; }
  tr.tbl-bg-clr-even { background-color: lightgreen;}
</style>
<table class="table">
  <thead>
    <tr><th>No.</th><th>名前</th><th>年齢</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in people | filter: query" ng-class-even="tblBgClr.even" ng-class-odd="tblBgClr.odd">
      <td>{{$index + 1}}</td>
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
    </tr>
  </tbody>
</table>

関連記事の目次

AngularJS

AngularJSの特徴、仕組み

ビルトインディレクティブ

サービス

カスタムディレクティブ

WordPressで使用