以破折号为键的 ngClass 样式

我希望这可以为使用破折号的样式的用户省去一些麻烦，特别是在 bootstrap 已经变得如此流行的情况下。

我使用角度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}">

上面的线路不工作。当 someBooleanValue为 true 时，该类不与 icon-white一起追加。但是，如果我将键更改为 iconWhite，它将成功地添加到类值列表中。如何用破折号添加值？

angularjs

31055 次浏览

小开

最佳答案

经过几个小时的黑客攻击，原来破折号被插入! 需要引号。

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

更新:

在老版本的 Angular 中，使用反斜杠也可以解决这个问题，但是在新版本中就不行了。

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

前者可能更好，因为您可以更容易地在您喜欢的编辑器中搜索它。

小开

\'icon-white\'也可以工作(使用 AngularJS1.2.7)

小开

N 类:

    .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>