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


165

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

Я использую угловой 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}">

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


1
Привет, добро пожаловать на ТАК! Вы должны обновить свой вопрос, чтобы разделить его на вопрос и ответ - ответ на свой вопрос в порядке, и рекомендуется, если это полезно. Таким образом, вы можете принять свой ответ, и другие пользователи могут увидеть, что на вопрос есть успешный ответ.
Алекс Осборн

Спасибо за ваше предложение!
Foo L

Ответы:


364

После нескольких часов хакерства получается, что тире интерполируется! Цитаты нужны.

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

Я надеюсь, что это помогает кому-то рвать на себе волосы.

ОБНОВИТЬ:

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

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

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


15
Спасибо тебе за это. Я потратил слишком много времени на это тоже.
Таудеп

2
Спасибо!!! Я знал, что это происходит, но я не был уверен, как решить. СПАСИБО!
Марк Форд

1
Я использую AngularJS 1.2.3. «\ -» не работает для меня. «» работал очень хорошо.
bobzsj87

1
Интересно, почему это не работает для меня, когда я, кажется, следовал другим примерам!
Невстер

$ scope.someBooleanValue = true
zloctb

11

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


Это лучший ответ, так как он наиболее ориентирован на будущее и обратно совместим
Эрик Стейнборн,

2
Здравствуй! @EricSteinborn Я из будущего, я пришел сюда, чтобы предупредить вас: это совсем не дружелюбно!
Опечатка

0

альтернатива для использования нг-класса:

    .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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.