Come posso forzare l'ordine del nome di classe con la classe ng

Question

Sto usando ui semantico e angolare (1.4) ui per creare un'applicazione. Sto vivendo una situazione in cui aggiungere dinamicamente i nomi delle classi tramite risultati angolari nel rendering errato perché ng-class sembra riorganizzare i nomi delle classi a piacimento. Questo non è auspicabile, perché la semantica si aspetta che alcune combinazioni di nomi di classi seguano l'ordine naturale/semantico. Esempio:

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

This risultati (quando l'ambito modifiche wideVersion variabili) in una dom di:

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

Questo non funziona, perché semantica richiede i classnames seguire ordine naturale in questo caso di utilizzo. Ho provato diverse varianti di ng-class ma il risultato è lo stesso.

Grazie

Answer 1

penso che è possibile utilizzare ng-attr-class o semplicemente classe con interpolazione interna. Ma ci sono casi in cui angolare è l'aggiunta automatica di classi agli elementi, ad esempio ng-show e moduli di input, quindi potrebbe essere necessario trovare una soluzione più completa.

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>