AngularJS ディレクティブを条件付き CSS スタイルにどのように使用できますか?

AngularJS の条件付き CSS スタイル

AngularJS には、CSS スタイルを条件付きまたは動的に適用するためのさまざまなディレクティブが用意されています。これらのディレクティブは次のとおりです。

• ng-class: CSS スタイルが固定されている場合に使用します。
• ng-style: スタイルの場合に使用します。値は動的に変化します。
• ng-show およびng-hide: CSS を変更して要素を表示または非表示にするために使用します。
• ng-if: 単一の条件を確認し、DOM を変更するために使用します。
>
• ng-switch: 複数の条件を確認し、 DOM.
• ng-disabled および ng-readonly: フォーム要素の動作を制限するために使用します。
• ng-animate: CSS3 トランジションとアニメーションを追加するために使用します。

へ条件付きでスタイルを適用し、Angular は ng-model を介してモデル プロパティを UI 要素に結び付けます。次に、ユーザー入力を使用してこのプロパティを変更し、関連するディレクティブをトリガーして CSS スタイルを更新します。

Q1 の例: 項目の削除

ng-class は次のとおりです。 CSS スタイルがクラスでキャプチャされるこのシナリオに適しています。 ng-class 式は、ブール値にマップされたクラス名の文字列、配列、またはオブジェクトにすることができます。チェックされた項目については、「pending-delete」クラスを適用できます:

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

Q2 の例: ユーザーのパーソナライゼーション

動的 CSS スタイルの場合、ng-styleの方が良い選択肢です。値にマップされた CSS スタイル名のオブジェクトとして評価される式を受け取ります。たとえば、ユーザーが選択した背景色を設定できます:

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

以上がAngularJS ディレクティブを条件付き CSS スタイルにどのように使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。