[解決済み] AngularJSのngClassの条件付き
2022-03-19 21:58:07
質問
のような式を作る方法はありますか?
ng-class
を条件付きにすることはできますか?
例えば、以下のように試してみました。
<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>
このコードの問題点は、どのような
obj.value1
は、常にその要素にクラステストが適用されます。これを実行すると
<span ng-class="{test: obj.value2}">test</span>
限り
obj.value2
が真実の値と等しくない場合、クラスは適用されません。 これで、最初の例の問題を回避することができます。
<span ng-class="{test: checkValue1()}">test</span>
ここで
checkValue1
関数は次のようなものです。
$scope.checkValue1 = function() {
return $scope.obj.value === 'somevalue';
}
というのが気になるところですが
ng-class
は動作するようになっています。 私もカスタムディレクティブを作っていて、これと似たようなことをしたいと思っています。しかし、私は式を見る方法を見つけることができません(そして、多分それは不可能であり、このように動作する理由です)。
以下は プランクル を使えば、私の言いたいことがわかります。
解決方法は?
最初の試みはほぼ正しいです。
{test: obj.value1 == 'someothervalue'}
以下は プルンクル .
ngClassディレクティブは、trulyまたはfalseyと評価されるすべての式で動作します。これはJavascriptの式と少し似ていますが、いくつかの違いもあります。 ここで . もし条件が複雑すぎる場合は、3回目の試行のように、truthyまたはfalseyを返す関数を使用することができます。
一応補足しておきます。また、論理演算子を使って、次のような論理式を作ることができます。
ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] HTMLマークアップのどこに<script>タグを記述すればよいですか?
-
[解決済み] <meta charset="utf-8"> vs <meta http-equiv="Content-Type">.
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み] 複数のノンブレイキングスペース("nbsp")ではなく、タブスペースを使用しますか?
-
[解決済み] Angular:*ngClassを使った条件付きクラス
-
[解決済み] CSSのクラスは、1つまたは複数の他のクラスを継承することができますか?
-
[解決済み] 特定のクラスや属性を持たない要素を選択するCSSセレクタは書けますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] HTMLにおける'"'エンティティの使用法
-
[解決済み] <html xmlns="http://www.w3.org/1999/xhtml">」は何をするものですか?
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] XHTMLの自己完結型タグを除くオープンタグにマッチするRegEx
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] HTMLの "role "属性は何のためにあるのですか?
-
[解決済み] クラスを条件付きで適用する場合の最適な方法は何ですか?
-
[解決済み] Flexbox:水平方向と垂直方向の中央揃え
-
[解決済み] マークダウンにおける相互参照 (名前付きアンカー)
-
[解決済み] AngularJsでng-repeatを使用してフィルタリング(キー、値)を行うには?