키에 대시가있는 ngClass 스타일


165

나는 이것이 부트 스트랩이 인기를 얻었 기 때문에 대시를 사용하는 스타일로 두통을 덜어주기를 바랍니다.

나는 각도 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}">

위의 줄은 작동하지 않습니다. 클래스가 true 일 icon-white때는 클래스가 추가되지 않습니다 someBooleanValue. 그러나 키를로 변경하면 iconWhite클래스 값 목록에 성공적으로 추가됩니다. 대시로 값을 어떻게 추가합니까?


1
안녕하세요, SO에 오신 것을 환영합니다! 질문을 질문과 답변으로 나누려면 질문을 업데이트해야합니다. 자신의 질문에 대답하는 것이 좋습니다. 도움이된다면 격려하십시오. 이렇게하면 답변을 수락 할 수 있으며 다른 검색 사용자는 질문에 성공적인 답변이 있음을 알 수 있습니다.
Alex Osborn

당신의 제안에 감사드립니다!
Foo L

답변:


364

해킹 후 몇 시간이 지나면 대시가 보간됩니다. 따옴표가 필요합니다.

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

나는 이것이 누군가가 머리카락을 찢어 버리지 않기를 바랍니다.

최신 정보:

이전 버전의 Angular에서는 백 슬래시를 사용하여 트릭을 수행하지만 최신 버전에서는 그렇지 않습니다.

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

선호하는 편집기에서 더 쉽게 검색 할 수 있기 때문에 전자가 선호 될 수 있습니다.


15
감사합니다. 나는 이것에도 WAY TOO MUCH 시간을 낭비했습니다.
taudep

2
감사합니다!!! 나는 이것이 일어나고 있다는 것을 알았지 만 어떻게 해결할지 확신하지 못했습니다. 감사!
Mark Ford

1
AngularJS 1.2.3을 사용합니다. "\-"가 작동하지 않습니다. " ''"는 매우 잘 작동했습니다.
bobzsj87

1
다른 예제를 따르는 것처럼 보 였는데 왜 이것이 효과가 없었는지 궁금합니다!
nevster

$ scope.someBooleanValue = true
zloctb

11

\'icon-white\' 잘 작동합니다 (AngularJS 1.2.7에서)



2
안녕하세요! @EricSteinborn 나는 미래에서 왔고 경고하기 위해 여기에 왔습니다 : 이것은 전혀 친절하지 않습니다!
Typo

0

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>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.