ngClass风格与破折号钥匙

156

我希望这可以帮助人们避免使用破折号的风格，尤其是在bootstrap变得如此受欢迎的情况下。ngClass风格与破折号钥匙

我使用角1.0.5通过方式的

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

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

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

上述行不起作用。当someBooleanValue为真时，该类不会附加icon-white。但是，如果我将密钥更改为iconWhite，它将成功添加到类值列表中。如何用短划线添加一个值？

来源

2013-03-21 Foo L

嗨，欢迎SO！你应该更新你的问题，把它分成一个问题和一个答案 - 回答你自己的问题是可以的，如果有帮助的话，鼓励你回答。这样你就可以接受你的答案，而其他搜索者可以看到这个问题有一个成功的答案。 – 2013-03-22 00:34:39

感谢您的建议！ – 2013-03-23 01:40:14

342

经过几小时的黑客攻击后，事实证明该短划线被内插了！行情是必要的。

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

我希望这能帮助别人把头发撕掉。

UPDATE：

在老版本的角度，用一个反斜杠也做的伎俩，但不是在新版本。

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

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

来源

2013-03-23 01:39:37

+13

对此感谢。我也浪费了太多时间在这个方面。 – taudep 2013-06-13 15:34:12

不客气！ – 2013-06-13 21:55:43

谢谢!!!我知道这是在发生，但我不确定如何解决。谢谢！ – 2013-10-17 14:53:58

\'icon-white\'作品，以及（与AngularJS 1.2.7）

来源

2014-02-17 17:02:24 Bromoxid

这是最好的答案，因为它是对未来最友好和向后兼容的 – 2014-03-24 17:35:48

嗨！ @EricSteinborn我来自未来，我来这里警告你们：这根本不友善！ – Typo 2017-11-04 20:24:33

替代的用途纳克级：

.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-02 14:30:25 zloctb

ngClass风格与破折号钥匙

回答

相关问题