AngularJS ngClass で条件付きクラス割り当てをマスターしよう

AngularJS ngClass 条件付き

概要

• ngClass は、オブジェクトとスコープ式表現を受け取り、要素にクラスを動的に割り当てます。
• オブジェクトのキーはクラス名、値は真偽値です。
• 真偽値が true の場合、対応するクラスが要素に追加されます。
• スコープ式表現を使用して、条件に基づいてクラスの割り当てを動的に制御できます。

例

<div ng-class="{active: isLoggedIn, disabled: !isLoggedIn}">
  ログインボタン
</div>

この例では、isLoggedIn スコープ変数の値に基づいて active と disabled クラスを切り替えます。

• isLoggedIn が true の場合、active クラスが要素に追加され、ボタンがアクティブになります。

条件付きクラス割り当て

<div ng-class="{
  'text-red': isError,
  'text-green': !isError && isSuccess,
  'text-blue': !isError && !isSuccess
}">
  メッセージ
</div>

この例では、isError、isSuccess スコープ変数の値に基づいて text-red、text-green、text-blue クラスを切り替えます。

• isError が true の場合、text-red クラスが要素に追加され、メッセージが赤色で表示されます。

複数の条件を組み合わせる

&& 演算子と || 演算子を使用して、複数の条件を組み合わせてクラスの割り当てを制御できます。

<div ng-class="{
  'large-font': isLargeFont && !isSmallFont,
  'small-font': !isLargeFont && isSmallFont
}">
  テキスト
</div>

この例では、isLargeFont と isSmallFont スコープ変数の値に基づいて large-font と small-font クラスを切り替えます。

• isLargeFont が true かつ isSmallFont が false の場合、large-font クラスが要素に追加され、テキストが大きくなります。

ngClass の利点

• コードの簡潔化: 条件分岐によるクラスの追加・削除を記述する必要がなくなり、コードが簡潔になります。
• 動的なクラス割り当て: スコープ変数の値の変化に応じて、要素のクラスを動的に変更できます。
• メンテナンス性の向上: 条件に基づいたクラスの割り当てを集中管理できるため、コードのメンテナンス性が向上します。

AngularJS ngClass は、条件に基づいて要素に動的にクラスを追加・削除する便利なディレクティブです。条件付きクラス割り当てによって、コードの簡潔化、動的なクラス割り当て、メンテナンス性の向上を実現できます。

HTML

<div ng-app>
  <div ng-controller="MyCtrl">
    <div ng-class="{active: isLoggedIn, disabled: !isLoggedIn}">
      ログインボタン
    </div>
    <br>
    <button ng-click="isLoggedIn = !isLoggedIn">ログイン状態を切り替え</button>
  </div>
</div>

JavaScript

var app = angular.module('myApp', []);

app.controller('MyCtrl', function($scope) {
  $scope.isLoggedIn = false;
});

このコードを実行すると、以下のようになります。

• 最初は、ログインボタンは無効になっています (disabled クラスが付与されている)。
• "ログイン状態を切り替え" ボタンをクリックすると、isLoggedIn スコープ変数の値が true に切り替わります。
• その結果、active クラスがログインボタンに追加され、ボタンがアクティブになります。

AngularJS ngClass 以外の条件付きクラス割り当て方法

ngSwitch ディレクティブは、スコープ変数の値に基づいて、要素に表示するコンテンツを切り替えることができます。クラスの割り当てにも使用できます。

<div ng-switch="condition">
  <div ng-switch-when="value1" class="class1">...</div>
  <div ng-switch-when="value2" class="class2">...</div>
  <div ng-switch-default class="default-class">...</div>
</div>

<div ng-if="condition" class="class1">...</div>
<div ng-if="!condition" class="class2">...</div>

ternary 演算子

条件に基づいて、要素に直接クラスを割り当てることもできます。

<div class="{{ condition ? 'class1' : 'class2' }}">...</div>

カスタムディレクティブ

独自の条件付きクラス割り当てロジックを実装したい場合は、カスタムディレクティブを作成することができます。

ngClass ディレクティブは、条件付きクラス割り当てを行う最も一般的な方法ですが、他にもいくつかの方法があります。状況に応じて、最適な方法を選択してください。