angularjs - 带有破折号的 ngClass 样式

Question

我希望这可以让人们对使用破折号的样式感到头疼，尤其是在 bootstrap 变得如此流行的情况下。

我正在使用 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-whitewhensomeBooleanValue为 true。但是，如果我将键更改为iconWhite，它会成功添加到类值列表中。如何用破折号添加值？

Answer 1

经过几个小时的修改，结果是破折号被插值了！需要报价。

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

更新：

在旧版本的 Angular 中，使用反斜杠也可以解决问题，但在新版本中则不行。

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

前者可能是首选，因为您可以更轻松地在您喜欢的编辑器中搜索它。

Answer 2

\'icon-white\'也可以（使用 AngularJS 1.2.7）

Answer 3

替代使用 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>