1. ホーム
  2. angularjs

[解決済み] ダッシュをキーにしたngClassスタイル

2022-04-24 05:08:46

質問

特にブートストラップがこれほど普及して以来、ダッシュを使用するスタイルで頭を悩ませている人が、これで救われるといいのですが。

によって、angular 1.0.5を使用しています。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>

ngClass ドキュメント この例はシンプルですが、クラス名とブール値のマップを式にすることができることも書かれています。で示したように、アイコンに "icon-white" スタイルを使おうとしていました。 ブートストラップ・ドキュメント ブーリアン変数に依存します。

<i class="icon-home" ng-class="{icon-white: someBooleanValue}">

上の行はうまくいきません。クラスは icon-white すると someBooleanValue が真になります。しかし、もし私がキーを iconWhite の場合、正常にクラス値のリストに追加されます。ダッシュを含む値をどのように追加するのでしょうか?

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

何時間もハックした結果、ダッシュが補間されることが判明しました! 引用符が必要です。

<i class="icon-home" ng-class="{'icon-white': someBooleanValue}">

これで誰かが髪を引き裂かれるのを防げればいいのですが。

UPDATE

Angularの古いバージョンでは、バックスラッシュを使ってもうまくいくのですが、新しいバージョンではそうではありません。

<i class="icon-home" ng-class="{icon\-white: someBooleanValue}">

お気に入りのエディタでより簡単に検索できるので、前者の方が好ましいでしょう。