반응형
키에 대시가있는 ngClass 스타일
나는 특히 부트 스트랩이 인기를 얻었으므로 대시를 사용하는 스타일로 두통을 덜어주기를 바랍니다.
나는 각도 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
클래스 값 목록에 성공적으로 추가됩니다. 대시로 값을 어떻게 추가합니까?
몇 시간 동안 해킹을 한 후 대시가 보간됩니다. 따옴표가 필요합니다.
<i class="icon-home" ng-class="{'icon-white': someBooleanValue}">
나는 이것이 누군가가 머리카락을 찢어 버리지 않기를 바랍니다.
최신 정보:
이전 버전의 Angular에서는 백 슬래시를 사용하여 트릭을 수행하지만 최신 버전에서는 그렇지 않습니다.
<i class="icon-home" ng-class="{icon\-white: someBooleanValue}">
선호하는 편집기에서 더 쉽게 검색 할 수 있기 때문에 전자가 선호 될 수 있습니다.
\'icon-white\'
잘 작동합니다 (AngularJS 1.2.7에서)
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>
참고 URL : https://stackoverflow.com/questions/15557151/ngclass-style-with-dash-in-key
반응형
'IT' 카테고리의 다른 글
Spring MVC-Spring 컨트롤러의 맵에서 모든 요청 매개 변수를 얻는 방법은 무엇입니까? (0) | 2020.06.01 |
---|---|
DateTime에서 시간 추출 (SQL Server 2005) (0) | 2020.05.31 |
NFS 마운트 디렉토리 강제 마운트 해제 (0) | 2020.05.31 |
JavaScript 경고 상자 제목을 편집하는 방법은 무엇입니까? (0) | 2020.05.31 |
Java 메소드에서 2 개의 값을 반환하는 방법은 무엇입니까? (0) | 2020.05.31 |