AngularJSのng-class、ng-styleを使ってCSSを設定

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

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

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’}”>

サンプルコード
デモとコードサンプルはこちら
 
1)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>

 
2)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>

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください