How can I force the order of class names with ng class

Question

I use semantic ui and angular (1.4) ui to create an application. I came across a situation where dynamically adding class names using angular results in incorrect rendering, since the ng class seems to rearrange the class names as it sees fit. This is undesirable because semantics expects certain combinations of class names to follow a natural / semantic order. Example:

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

This results in (when the scope wideVersion variable changes) in dom:

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

This does not work, because semantics require that the class names correspond to the natural order in this use case. I tried several variations of the ng class, but the result is the same.

thanks

Answer 1

I think you can use ng-attr-class or just a class with interpolation inside. But there are times when angular automatically adds classes to elements, such as ng-show and form inputs, so you may need to find a more complete solution.

 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>