AngularJS で CSS スタイルを条件付きで適用および削除するにはどうすればよいですか?

AngularJS での条件付き CSS スタイルの適用

質問: AngularJS で CSS スタイルを条件付きで適用および削除するにはどうすればよいですか?

答え: AngularJS はいくつかの機能を提供しますCSS スタイルを動的に管理するためのディレクティブ:

• ng-class: 条件に基づいて CSS クラスを適用または削除します。
• ng-style: 特定の CSS スタイルを適用できません。 class.
• ng-show および ng-hide: 条件に基づいて要素の表示/非表示を切り替えます。
• ng-if: 単一の要素に基づいて要素を表示または非表示にします条件。
• ng-switch: 複数の排他的可視性シナリオを処理します。
• ng-disabled および ng-readonly:コントロールフォーム要素動作。
• ng-animate: 要素にアニメーションとトランジションを追加します。

Q1: 項目削除の条件付きスタイル:

項目がマークされているときに ng-class を使用して削除保留クラスを切り替える

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

Q2: カスタマイズ可能なユーザー インターフェイス:

NG スタイルを使用して、ユーザー入力に基づいて 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 サイトの他の関連記事を参照してください。