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風格與破折號鑰匙

回答

相關問題