Question

我希望这可以让使用破折号的风格让人头疼，特别是因为bootstrap已经变得如此受欢迎。

我正在使用角度1.0.5

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

在ngClass documentation中，示例很简单，但它也提到表达式可以是类名到布尔值的映射。我试图在我的图标上使用“icon-white”样式，如bootstrap documentation所示，具体取决于布尔变量。

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

上面的行不起作用。 icon-white为真时，该类未附加someBooleanValue。但是，如果我将密钥更改为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>

键入短划线的ngClass样式

3 个答案: