Стиль ngClass с тире в ключе

Надеюсь, это спасет кого-то головную боль со стилями, использующими тире, тем более, что загрузка стала популярной.

Я использую angular 1.0.5 с помощью

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

В документации ngClass пример прост, но он также упоминает, что выражение может представлять собой карту имен классов для булевых значений. Я пытался использовать "значок-белый" стиль на моем значке, как показано в загрузочной документации, в зависимости от логической переменной.

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

Строка выше не работает. Класс не добавляется с icon-white, если someBooleanValue - true. Однако, если я изменил ключ на iconWhite, он будет успешно добавлен в список значений класса. Как добавить значение с тире?

Ответы

Ответ 1

После нескольких часов взлома, оказывается, штрих интерполируется! Котировки необходимы.

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

Надеюсь, это поможет кому-то отрывать волосы.

UPDATE:

В более старых версиях Angular использование обратной косой черты также делает трюк, но не в более новых версиях.

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

Первое, вероятно, предпочтительнее, так как вы можете более легко найти его в своем любимом редакторе.

Ответ 2

\'icon-white\' работает (с AngularJS 1.2.7)

Ответ 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>