Phong cách ngClass với dấu gạch ngang trong phím

Tôi hy vọng điều này sẽ giúp ai đó đỡ đau đầu với các kiểu sử dụng dấu gạch ngang, đặc biệt là khi bootstrap đã trở nên phổ biến.

Tôi đang sử dụng góc 1.0.5 bằng cách

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>

Trong tài liệu ngClass , ví dụ này đơn giản, nhưng nó cũng đề cập đến biểu thức có thể là ánh xạ của các tên lớp thành các giá trị boolean. Tôi đã cố gắng sử dụng kiểu "biểu tượng trắng" trên biểu tượng của mình như được hiển thị trong tài liệu bootstrap , tùy thuộc vào biến boolean.

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

Dòng trên không hoạt động. Các lớp học không được nối với icon-whitekhi nào someBooleanValuelà đúng. Tuy nhiên, nếu tôi thay đổi khóa thành iconWhite, nó sẽ được thêm thành công vào danh sách các giá trị lớp. Làm thế nào một người sẽ thêm một giá trị với một dấu gạch ngang?

Sau nhiều giờ hack xung quanh, hóa ra dấu gạch ngang được nội suy! Báo giá là cần thiết.

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

Tôi hy vọng điều này sẽ giúp ai đó xé tóc ra.

CẬP NHẬT:

Trong các phiên bản cũ hơn của Angular, sử dụng dấu gạch chéo ngược cũng thực hiện thủ thuật, nhưng không phải trong các phiên bản mới hơn.

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

Cái trước có lẽ được ưa thích hơn, vì bạn có thể dễ dàng tìm kiếm nó hơn trong trình soạn thảo yêu thích của bạn.

\'icon-white\' cũng hoạt động (với AngularJS 1.2.7)

thay thế cho việc sử dụng 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>