我如何強制使用ng-class

的類名命令我正在使用語義ui和angular（1.4）ui構建應用程序。我遇到了這樣一種情況，即通過角度結果動態添加類名稱導致不正確的呈現，因爲ng-class似乎可以隨意重新排列類名稱。這是不可取的，因爲語義期望某些類名稱組合遵循自然/語義順序。例如：我如何強制使用ng-class

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

此結果（當範圍可變wideVersion的變化）在一個DOM：

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

這不起作用，因爲語義需要的類名遵循自然順序在這種使用情況下。我嘗試了多個ng級的變體，但結果是一樣的。

感謝

來源

2015-10-14 MOneSixInCode

我認爲你可以使用ng-attr-class或只是類插值內。但有些情況下，angular會自動爲元素添加類，例如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>

來源

2015-10-14 19:07:09 Icycool

這也不起作用。類名仍然按照指定的順序排列。 – MOneSixInCode

嗯，你可以使用片段或小提琴重現？ – Icycool

我如何強制使用ng-class

回答

相關問題