ng-classでクラス名の順序を強制するには

Question

私はsemantic uiとangular（1.4）uiを使ってアプリケーションを構築しています。 ng-classがクラス名を自由に並べ替えるように見えるため、角度を介してクラス名を動的に追加すると、レンダリングが正しく行われないという状況が発生しています。セマンティックは特定のクラス名の組み合わせが自然/セマンティックな順序に従うことを期待しているため、これは望ましくありません。例：セマンティックは、このユースケースには自然の秩序に従うクラス名を要求するので、これは、動作しません

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

：のDOMで

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

この結果（スコープ変数wideVersionの変更）。私は複数のng-classバリエーションを試しましたが、結果は同じです。私はあなたが内側に補間してng-attr-classか、単にクラスを使用することができると思う

おかげ

Answer 1

。 しかし、angleが要素に自動的にクラスを追加している場合があります。たとえば、ng-showとフォーム入力があるので、より完全な解決策を見つける必要があります。

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>