Làm thế nào tôi có thể buộc thứ tự tên lớp với ng-class

Question

Tôi đang sử dụng ngữ nghĩa ui và góc (1,4) ui để xây dựng một ứng dụng. Tôi đang gặp một tình huống trong đó thêm tên lớp một cách linh động thông qua kết quả góc trong việc hiển thị không chính xác vì lớp ng dường như sắp xếp lại tên lớp theo ý muốn. Điều này là không mong muốn, bởi vì ngữ nghĩa mong đợi các kết hợp tên lớp nhất định theo thứ tự tự nhiên/ngữ nghĩa. Ví dụ:

<div class="ui two column grid"> 
    <div ng-class="wideVersion? 'sixteen wide column': 'fourteen wide column'"></div> 
</div> 

kết quả này (khi biến phạm vi thay đổi wideVersion) trong một dom của:

<div class="ui two column grid"> 
    <div class="wide column fourteen"></div> 
</div> 

này không làm việc, bởi vì ngữ nghĩa đòi hỏi sự classnames đi theo trật tự tự nhiên trong trường hợp sử dụng này. Tôi đã thử nhiều biến thể ng-class nhưng kết quả là như nhau.

Cảm ơn

Answer 1

Tôi nghĩ bạn có thể sử dụng ng-attr-class hoặc chỉ với lớp nội suy bên trong. Nhưng có những trường hợp góc cạnh tự động thêm các lớp vào các phần tử, ví dụ: ng-show và các đầu vào biểu mẫu, vì vậy bạn có thể cần tìm một giải pháp hoàn chỉnh hơn.

angular.module('test', []) 
 

 
.controller('Test', function($scope){ 
 
    
 
});

.test.one.two { 
 
    color:red; 
 
} 
 

 
.test.three.four { 
 
    color:blue; 
 
} 
 

 
.test.five.six { 
 
    color:green; 
 
} 
 

 
.test.seven.eight { 
 
    color:pink; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> 
 
<div ng-app='test' ng-controller='Test'> 
 
    <div ng-attr-class="{{checked ? 'test one two' : 'test three four'}}">test1</div> 
 
    <div class="{{checked ? 'test five six' : 'test seven eight'}}">test2</div> 
 
    <input type='checkbox' ng-model='checked'> click 
 
</div>