Jak wymusić porządek nazwy klasy za pomocą klasy ng

Question

Używam semantycznego interfejsu ui i kątowego (1.4) do zbudowania aplikacji. Występuje sytuacja, w której dynamiczne dodawanie nazw klas przez wyniki kątowe powoduje nieprawidłowe renderowanie, ponieważ klasa ng wydaje się dowolnie zmieniać nazwy klas. Jest to niepożądane, ponieważ semantyczne oczekuje, że niektóre kombinacje nazw klas będą podążać naturalną/semantyczną kolejnością. Przykład:

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

Te wyniki (gdy zakres zmiennej zmiany wideVersion) w DOM:

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

To nie działa, ponieważ semantyczny wymaga classnames podążać naturalny porządek w tym przypadku zastosowania. Próbowałem wielu odmian klasy ng, ale wynik jest taki sam.

Dzięki

Answer 1

myślę, że można użyć ng-attr-class lub po prostu klasę z interpolacją wewnątrz. Ale są przypadki, w których kątowe automatycznie dodaje klasy do elementów, na przykład ng-show i formularze wejściowe, więc może być konieczne znalezienie bardziej kompletnego rozwiązania.

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>