angularjs - 如何使用 ng-class 强制类名顺序

Question

我正在使用语义 ui 和 angular (1.4) ui 来构建应用程序。我遇到了一种情况，即通过 angular 动态添加类名会导致渲染不正确，因为 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-class 变体，但结果是一样的。

谢谢

Answer 1

我想你可以用 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>