キーにダッシュを含むngClassスタイル

165

特にブートストラップがとても人気になったので、これがダッシュを使用するスタイルで頭痛を救うことを願っています。

私は角度1.0.5を使用しています

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

でngClassのドキュメント、例は単純ですが、それはまた、式はブール値にクラス名のマップすることができ言及しています。ブール変数に応じて、ブートストラップのドキュメントに示されているように、アイコンに「アイコンホワイト」スタイルを使用しようとしました。

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

上記の行は機能しません。trueのicon-white場合、クラスには追加されませんsomeBooleanValue。ただし、キーをに変更するとiconWhite、クラス値のリストに正常に追加されます。どのようにダッシュで値を追加しますか？

angularjs

— フーL
ソース

こんにちは、SOへようこそ！質問を更新して、質問と回答に分割する必要があります。自分の質問に回答することは問題ありません。役立つ場合は、それを推奨します。そうすれば、あなたの答えを受け入れることができ、検索している他の人はその質問が成功した答えを持っていることを知ることができます。

— Alex Osborn

あなたの提案をありがとう！

— Foo L

回答:

364

何時間もハッキングした後、ダッシュが挿入されることがわかりました！見積もりが必要です。

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

これが誰かが髪を引き裂くのに役立つことを願っています。

更新：

Angularの以前のバージョンでは、バックスラッシュを使用することでもうまくいきますが、新しいバージョンではできません。

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

前者の方がお好みのエディターでより簡単に検索できるため、おそらく前者が好まれます。

— フーL
ソース

これありがとう。私もこれにWAY TOO MUCH時間を無駄にしました。

— taudep 2013年

ありがとうございました！！！これが起こっていることは知っていましたが、解決方法がわかりませんでした。ありがとう！

— Mark Ford

AngularJS 1.2.3を使用しています。「\-」は機能しません。「」は非常にうまくいきました。

— bobzsj87 2013

他の例に従っているように思われたときに、なぜこれが私にとってうまくいかないのか疑問に思っていました！

— nevster 14

$ scope.someBooleanValue = true

— zloctb

\'icon-white\' 動作します（AngularJS 1.2.7）

— ブロモキシド
ソース

それは、ほとんどの未来にやさしいと下位互換性があるとして、これが最良の答えです

— エリックSteinborn

こんにちは！@EricSteinborn私は未来の出身です。警告するためにここに来ました。これはまったく友好的ではありません！

— タイポ

ng-classを使用するための代替：

    .menu-disabled-true{
color: red;
}
    .menu-disabled-false{
color: green;
}


<div ng-controller="DeathrayMenuController">
<p class=menu-disabled-{{status}}>shanam</p>
 <button ng-click="action()">click me</button>
</div>

<script>



function DeathrayMenuController($scope) {
    $scope.status=true
    $scope.action= function(){
      $scope.status=!$scope.status
    }
}
</script>

— zloctb
ソース