分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – 如何使用ng-class强制类名称顺序，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我使用语义ui和angular(1.4)ui来构建应用程序.我遇到这样一种情况：通过角度动态添加类名导致错误的渲染,因为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级变体但结果是一样的.

谢谢

我认为你可以使用Ng-attr-class或者只使用内插插值的类.
但是有些情况下angular会自动向元素添加类,例如ng-show和form输入,因此您可能需要找到更完整的解决方案.

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>