[angularjs] 키에 대시가있는 ngClass 스타일

Program / 글쓴이

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

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

답변