[解決済み】AngularJSでCSSスタイルを条件付きで適用するにはどうすればよいですか？

質問

Q1. 削除ボタンが押される前に、ユーザーが削除するアイテムの外観を変えたいとします。 (この即時の視覚的なフィードバックにより、ことわざのような「よろしいですか?」というダイアログボックスは必要なくなります)。ユーザーは、どの項目を削除すべきかを示すチェックボックスにチェックを入れます。 チェックボックスのチェックを外すと、その項目は通常の外観に戻るはずです。

CSSのスタイリングを適用したり削除したりするには、どのような方法があるのでしょうか？

Q2. 自分のサイトの見せ方をユーザーごとにパーソナライズできるようにしたいとします。 例えば、フォントサイズを固定にしたり、前景色や背景色をユーザが定義できるようにするなどです。

ユーザーが選択・入力したCSSスタイルを適用するには、どのような方法が良いでしょうか？

どのように解決するのですか？

Angularには、CSSのスタイルを条件付き/動的に操作するための組み込みディレクティブが多数用意されています。

• ngクラス - CSS スタイルのセットが静的で、事前に分かっている場合に使用します。
• ngスタイル - スタイル値が動的に変化する可能性があるため、CSSクラスを定義できない場合に使用します。 プログラムによるスタイル値の制御を考えてください。
• ng-show と ng-hide - 表示・非表示だけでよい場合に使用します（CSSを変更します）。
• ng-if - バージョン 1.1.5 の新機能で、単一の条件（DOM を変更する）のみをチェックする必要がある場合に、より冗長な ng-switch の代わりに使用することができるようになりました。
• ng-スイッチ - 複数の排他的な ng-show を使用する代わりに使用する (DOM を変更する)
• ng-disabled（無効 と ng-readonly - フォーム要素の動作を制限するために使用します。
• ng-animate - バージョン 1.1.4 で、CSS3 のトランジション/アニメーションを追加するために使用されるようになりました。

通常の "Angular way" は、ユーザーの入力や操作を受け付ける UI 要素に model/scope プロパティを結びつけ（つまり ng-model を使用）、その model プロパティを前述の組み込みディレクティブの 1 つに関連付けます。

ユーザーがUIを変更すると、Angularはページ上の関連する要素を自動的に更新します。

---

Q1はng-classの良いケースのようだ -- CSSのスタイリングをclassに取り込むことができる。

ngクラス は、以下のいずれかに評価されなければならない "expression" を受け付けます。

1. スペースで区切られたクラス名の文字列
2. クラス名の配列
3. クラス名とブーリアン値のマップ/オブジェクト

アイテムが配列モデル上で ng-repeat を使って表示され、アイテムのチェックボックスがチェックされたときに pending-delete クラスがあります。

<div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
   ... HTML to display the item ...
   <input type="checkbox" ng-model="item.checked">
</div>

上記では、ng-class式タイプ#3 - クラス名からブール値へのマップ/オブジェクトを使用しました。

---

Q2はng-styleの良いケースのように思える -- CSSのスタイリングは動的なので、このためにクラスを定義することはできない。

ngスタイル は、次のように評価される必要がある "式" を受け入れます。

1. CSSスタイル名からCSS値へのマップ/オブジェクト

例えば、ユーザーが背景色のテキストボックスに色名を入力できるとします（jQueryのカラーピッカーがあれば、もっと素敵です）。

<div class="main-body" ng-style="{color: myColor}">
   ...
   <input type="text" ng-model="myColor" placeholder="enter a color name">

---

フィドル を上記の両方に使用します。

また、フィドルには、以下の例が含まれています。 ng-show と ng-hide . チェックボックスにチェックを入れると、背景色がピンクになるほか、テキストが表示されます。 テキストボックスに'red'が入力されると、divは非表示になります。