167

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

私はAngular 1.0.5を使用しています

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

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

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

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

4

3 に答える 3

369

何時間ものハッキングの後、ダッシュが補間されることが判明しました! 引用符が必要です。

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

アップデート：

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

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

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

于 2013-03-23T01:39:37.550 に答える
0

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>
于 2014-12-02T14:30:25.200 に答える