Wie kann ich die Reihenfolge der Klassennamen mit ng-Klasse erzwingen

Question

Ich benutze semantische ui und angular (1.4) ui, um eine Anwendung zu erstellen. Ich erlebe eine Situation, in der die Klassennamen dynamisch über eckige Ergebnisse in falschem Rendering hinzugefügt werden, da ng-class die Klassennamen nach Belieben anzuordnen scheint. Dies ist unerwünscht, da die Semantik erwartet, dass bestimmte Klassennamenkombinationen der natürlichen/semantischen Reihenfolge folgen. Beispiel:

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

Diese Ergebnisse (wenn der Bereich Variable wideVersion Änderungen) in einem dom von:

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

Das funktioniert nicht, weil semantische die Klassennamen erfordert natürliche Ordnung in diesem Anwendungsfall zu folgen. Ich habe mehrere Varianten der ng-Klasse ausprobiert, aber das Ergebnis ist das gleiche.

Dank

Answer 1

Ich glaube, Sie ng-attr-class oder einfach nur Klasse mit Interpolation innerhalb verwenden können. Es gibt jedoch Fälle, in denen angular Klassen automatisch Elemente hinzufügt, zum Beispiel ng-show und Formulareingaben, so dass Sie möglicherweise eine vollständigere Lösung finden müssen.

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>