ngClass 스타일(대시 입력 키 포함)

ngClass 스타일(대시 입력 키 포함)

특히 부트스트랩이 인기를 끌었기 때문에 대시스타일로 두통을 덜어주셨으면 합니다.

각 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클래스 값 목록에 정상적으로 추가됩니다.대시로 값을 추가하려면 어떻게 해야 합니까?

몇 시간 동안 해킹을 했더니 대쉬가 보간으로 박혀 있더군요!견적이 필요합니다.

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

갱신:

이전 버전의 Angular에서는 백슬래시를 사용해도 문제가 없지만 새 버전에서는 문제가 없습니다.

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

마음에 드는 에디터에서 쉽게 검색할 수 있기 때문에, 전자가 선호될 것입니다.

\'icon-white\'(Angular JS 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